Parser-wxapp NPM

parser-wxapp

小程序富文本解析插件

使用方法

安装
```
npm install parser-wxapp
```

使用

const parser=require('parser-wxapp');
var html="<div>Hello World!</div>";
parser(html).then(res=>{
  console.log(res);
}).catch(err=>{
  console.error(err);
})
/*
(async ()=>{
  res=await parser(html);   
})();
*/

[{
  "name": "div",
  "attrs": {},
  "children": [{
    "text": "Hello World!",
    "type": "text"
  }]
}]

参数

参数	类型	必填	默认值	说明
html	String	是		需要解析的 html 字符串
mode	String	否	html	解析模式，支持的有 html, website, file, markdown(md)
options	Object	否		解析设置，具体见下方说明

解析模式
- html 模式：输入一个 html 字符串
- website 模式：输入一个网址，必须以 http:// 或 https:// 开头
- markdown 模式：输入 markdown 字符串，支持表格、代码高亮等
- file 模式：输入文件路径，自动打开并解析（仅支持 html 和 md 文件）
解析设置
- styles：代码高亮风格，默认 default
- tagStyle：标签的默认样式，如 {body:"margin:5px"}
- domain：主域名，当多媒体标签的 src 属性是 / 开头的时，会自动与主域名拼接成完整的地址，避免无法在小程序上显示（解析模式为 website 时会自动获取 domain）
- autohighlight：是否自动对 pre 标签内的内容进行高亮处理，默认 true
- emojiParse：是否自动将形如 [笑脸] 的文本解析为 emoji 字符，默认 true
- compress：是否自动压缩（默认 true），开启后将通过移除 display:none 的标签，移除空标签，合并层级等方法进行压缩，对于复杂的网页，可以减小大小；设置成2时，将进行强力压缩（移除所有标签的 id 和 class，将导致锚点无法跳转、无法匹配 wxss 中的样式等问题，如不需要可以使用，可以进一步减小大小）
- setContain：如果在百度小程序和头条小程序中使用，需要此设置为 true
- useAnchor：是否使用页面内锚点，设置为 true 将把所有设置了 id 属性的节点都通过组件递归的方式显示，默认 false
- maxDepth：前端显示时的最大递归深度，为0或负数时代表不限制（默认为0）。层数超过限制时，会直接使用 rich-text 显示而不再递归，可能导致图片不能预览，链接无法点击，视频和音频无法显示等问题；但过深的深度可能导致渲染时间较长；对于复杂的内容可以适当进行限制（需与前端组件Parser配合）
返回值
一个 nodes 数组，可以直接作为 rich-text 组件的 nodes 属性，也可以作为 Parser 组件的参数
与前端 Parser 组件配合
本插件建议与前端轻量级组件包 Parser 配合使用，返回值可以直接作为 Parser 组件的参数，与该插件配合可以实现图片预览，链接点击，视频显示等一些 rich-text 组件无法实现的功能。
GitHub地址

注意：本包需要node.js v7.6.0以上运行环境，不能直接在小程序前端使用，建议部署在云函数或服务器上，将解析结果返回前端显示

功能介绍

支持解析和匹配 style 标签中的样式
支持以下模式的匹配：

模式	匹配的标签	说明
.demo	<element class="demo">	按class匹配
#demo	<element id="demo">	按id匹配
body	<body>	按标签名匹配
*	所有	通配符
.demo1,.demo2	<element class="demo1"><element class="demo2">	多个并列
.demo1.demo2	<element class="demo1 demo2">	一层多个
.demo1 .demo2	<element class="demo1">... <element class="demo2">	后代选择器
.demo1>.demo2	<element class="demo1"> <element class="demo2">	子选择器
.demo::before	<element class="demo" ::before>	before伪类
.demo::after	<element class="demo" ::after>	after伪类

示例：

<style>
.demo1 .demo2{
  text-align:center;
}
</style>
<div class="demo1">
  <div class="demo2">Hello World!</div>
</div>

解析多层style

与前端组件 Parser 组件相比，增加支持以下标签
标签名属性
iframe src, width, height, marginheight, marginwidth, scrolling
frame src, width, height, marginheight, marginwidth, scrolling
embed src
link href
备注：
- iframe 和 frame 标签的 src 仅支持网络地址（不支持 iframe 视频）
- embed 标签仅支持文件类型为视频（mp4, mov, m4v, 3gp, avi, m3u8, webm 等），音频（mp3, aac, midi 等），否则将被忽略
- link 标签仅支持 css 文件，否则将被忽略
支持解析各类实体
支持解析各类 html 实体编码（包括中文）
```
<span>&#x8FD9;&#x662F;&#x5B9E;&#x4F53;&#x7F16;&#x7801;</span>
```
支持代码高亮
支持自动识别语言并进行高亮显示，可自行选择高亮风格(详细可以查看 highlightjs官网）
示例：
```
var html=`<pre>function demo(){
  console.log("Hello World!");
}</pre>`
return await parser(html,'html',{styles:"atom-one-dark"});
```
智能压缩
支持自动对解析结果进行压缩，包括合并一些只有一个子节点的标签，移除display:none的标签，移除空标签，消除重复的 style 样式等方法，可有效减小大小，加快传输速度和渲染速度
支持自动将地址填充完整
对于多媒体标签的 src 属性，如果以 / 开头，将自动填充上主域名，避免在小程序中无法显示（可以在 options.domain 中设置，解析模式为 website 时会自动获取）
示例：
```
await parser("<img src='/path/demo.jpg'>","html",{domain:"https://example.com"});
//https://example.com/path/demo.jpg
```
支持 website 模式
输入网址即可显示其内容，仅能用于简单的静态网页（在 js 中动态加载的内容将被忽略）示例：
```
await parser("https://example.com","website");
```
支持 markdown 模式
支持解析 markdown，包括表格，代码高亮等
```
# 示例
| 标题1 | 标题2 |
|:---:|:---:|
| 栏目1 | 栏目2 |
```
支持 file 模式
支持输入文件路径即可自动打开文件并进行解析（仅支持 html 文件或 md 文件）
示例：
```
return await parser(path.join(__dirname,'demo.html'),"file");
```

标签名	属性
iframe	src, width, height, marginheight, marginwidth, scrolling
frame	src, width, height, marginheight, marginwidth, scrolling
embed	src
link	href

立即体验

点击自定义测试，解析模式选择“后端解析”即可体验
立即体验

更新日志

2019.12.30
1. U 支持自动去除重复的 style 样式来减小解析结果的大小
2. U 将 options.compress 设置成 2 时，将进行强力压缩（移除所有标签的 id 和 class 属性）
3. F 修复了一些错误
2019.12.21
1. F 修复了解析 font 标签的 size 属性时出错的问题
2019.12.15
1. U 重构了解析脚本，加快解析速度
2. U 返回值格式更改为 array
2019.12.3
1. U style 标签支持匹配 before 和 after 伪类
2019.10.28
1. F 修复了部分情况下子选择器 > 匹配出错的问题
2019.10.14
1. F 修复了部分情况下样式被错误匹配的问题
2019.9.28
1. F 修复了高亮处理时 pre 标签中的实体编码不被编码的问题
2019.9.21
1. U 优化了 class 匹配的优先级，按照 id 原则器 > class 选择器 > name 选择器的优先级排列
2. F 修复了部分情况下通配符不生效的问题
2019.9.15
1. U 支持自动移除空标签，进一步减小解析结果大小
2019.9.13
1. A 增加支持解析 emoji 小表情（将形如 [笑脸] 的文本解析为 emoji 字符）
2. U 减小了节点深度（主要是通过合并一些只有一个子节点的标签，对于较复杂的网页，可减小 60%）
3. U 减小了解析结果的大小（主要通过减小节点深度和去掉不必要的空白符来实现，对于较复杂的网页，可达30%），可以加快传输和解析
2019.8.22
1. U 支持了 font 标签的 size 属性
2019.7.25
1. F 修复了部分情况下 style 标签中的样式匹配不正确的问题
2019.7.24
1. F 修复了低版本基础库无法显示 pre 标签的问题