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