Parser

微信小程序富文本插件（本文档动态更新，建议加星收藏）

立即体验

功能介绍

支持解析<style>标签中的全局样式
可以按以下模式解析

模式	举例	匹配
按class名匹配	.demo	<element class="demo">
按id名匹配	#demo	<element id="demo">
按标签名匹配	body	<body>...</body>
单层多个class	.demo1.demo2	<element class="demo1 demo2">
多个并列	.demo1,.demo2	<element class="demo1">或<element class="demo2">

含有@或*的，伪类以及多层的样式将被直接忽略；例如：

 <style>
 .demo1{
   font-style: italic;
 }
 #demo2{
   font-weight:bold;
 }
 p{
   text-align:center;
 }
 </style>
 <p>
  <span class="demo1">Hello </span>
  <span id="demo2">World!</span>
 </p>

支持自定义默认的标签样式

data:{
  tagStyle:{
    code: "font-style:italic;color:#005cc5"
  }
}

<Parser html="<code>test</code>" tag-style="{{tagStyle}}" />

自动设置标题
若html中存在title标签，将自动把title标签的内容设置到页面的标题上，并在回调bindparse中返回，可以用于转发
支持添加加载提示
可以在Parser标签内添加加载提示或动画，将在未加载完成或内容为空时显示，加载完成后自动隐藏，例如：
```
<Parser html="{{html}}">加载中...</Parser>
```
支持动画显示效果
通过设置show-with-animation属性可以实现内容加载完成后渐显的动画效果
```
<Parser html="{{html}}" show-with-animation animation-duration="500" />
```
支持多资源加载
可以在video和audio中设置多个source标签，组件将按顺序进行加载，若前面的链接无法播放，将自动切换下一个链接进行加载和播放，直到最后一个链接；可用于解决平台差异，最大程度避免无法播放
```
<video controls>
  <source src="demo1.mov" />
  <source src="demo2.webm" />
</video>
```
支持长按复制内容
通过设置selectable属性可以实现长按复制任意内容

支持的标签种类丰富，包括视频、表格等
在rich-text组件的基础上增加支持以下标签:

标签	属性
video	src, controls, loop, autoplay, muted, height, width
audio	src, controls, loop, autoplay, poster, name, author
source	src
u
s
center
font	face, color
pre
section
style
body

另外，对于不在支持列表中的标签，除个别会直接移除外，都会被转换为一个行内标签，因此可以使用一些语义化标签
附注：2.7.1基础库开始rich-text组件已经支持section、center、u、s、font等标签，但本插件可以实现低版本兼容

图片支持大小自适应，点击图片可以预览（预览时通过左右滑动可以查看所有图片）；对于一些装饰性的图片，可以对其设置ignore属性，设置后将无法预览
点击a标签，若href为小程序内部页面路径，将直接跳转；若是网页链接，则可以自动复制链接（可通过autocopy属性控制），并在浏览器中打开；点击时将有下划线和半透明的效果，支持图片链接。链接被点击时会触发bindlinkpress事件，可以在该回调中进行下载附件等更多操作
支持解析有序列表和无序列表（直接由rich-text进行显示）

容错性强，稳定性高，不需要网络请求
以下情况都可以正常解析：

<!--冒号不匹配-->
<div style="font-family:"宋体";text-align:center;">Hello</div>
<!--标签首尾不匹配-->
<div> World</label>
<!--异形标签-->
<o:p></o:p>
<!--缺少尾标签-->
<div>!

功能强大，支持无限层级，解析速度快，包大小仅约33.8KB

使用方法

在需要引用的页面的json文件中添加

{
  "usingComponents": {
    "Parser":"/Parser/index"
  }
}

在需要引用的页面的wxml文件中添加
```
<Parser html="{{html}}" />
```

在需要引用的页面的js文件中添加

onLoad:function(){
  this.setData({
    html:'your html'
  })
}

在Taro中使用可参考：https://github.com/xPixv/Taro-ParserRichText

组件属性：

属性	类型	默认值	必填	说明
html	String/Object/Array		是	要显示的富文本数据，具体格式见下方说明
tag-style	Object		否	设置标签的默认样式
autocopy	Boolean	true	否	是否允许链接受到点击时自动复制链接（仅限http开头的网络链接）
autopause	Boolean	true	否	是否允许播放视频时自动暂停其他视频
autosetTitle	Boolean	true	否	是否自动将title标签的内容设置到页面标题上
img-mode	String	default	否	图片显示模式
selectable	Boolean	false	否	是否允许长按复制内容
show-with-animation	Boolean	false	否	是否使用渐显动画
animation-duration	Number	400	否	动画持续时间

html格式：
1. string类型：一个html字符串，例如：<div>Hello World!</div>
2. object类型：一个形如{nodes: [Array], imgList: [Array], videoNum: Number, title: "String"}的结构体，其中nodes数组的格式基本同rich-text，对于该节点下有img，video，a标签的，需要将continue属性设置为true，否则将直接使用rich-text组件渲染，可能导致图片无法预览，链接无法点击等问题，imgList为其中所有图片地址的数组，videoNum是视频数量（不必要，用于autopause属性）title是页面的标题（不必要，传入将会设置到页面的标题上）回调函数bindparser的返回值就是这样的结构体
3. array类型：格式要求同上（用此格式传入预览图片时，将不能通过左右滑动查看所有图片）
4. 使用b, c方法可以节省解析的时间，提高性能
关于img-mode 默认default，在没有设置宽高时，按图片原大小显示；设置了宽或高时，按比例进行缩放；同时设置了宽高时，按设置的宽高进行缩放。在同时设置了宽高的情况下，宽度可能因为max-width:100%的限制而缩短导致图片变形，此时可将模式设置为widthFix，即保持宽度不变，高度自动变化（会导致设置的高度无效）
关于tag-style
可以设置标签的默认样式，如{ body:"margin:5px" }；仅传入的html为String类型时有效（在解析过程中设置）

回调函数

名称	功能	说明
bindparser	在解析完成时调用（仅当传入的html为`字符串`时会调用）	返回一个`object`，其中`nodes`为解析后的节点数组，`imgList`为图片列表，`title`是页面标题，该`object`可以在下次调用直接作为html属性的值，节省解析的时间
bindready	渲染完成时调用	返回整个组件的`NodesRef`结构体，包含宽度、高度、位置等信息（每次`html`修改后都会触发）
binderror	出错时返回	解析错误或加载多媒体资源出错时调用，返回一个`object`，其中`message`为错误原因，若由于加载多媒体资源出错还会具有`target`属性，包含该标签的具体信息
bindlinkpress	在链接受到点击时调用	返回该链接的`href`值，开发者可以在该回调中进行进一步操作，如下载文档和打开等

关于基础库

版本功能覆盖率

>=2.2.5 全部正常 98.96%

1.6.3-2.2.4 部分html实体无法显示 1.00%

<1.6.6 无法使用 0.04%
Api
- html2nodes
  功能：解析html字符串
  参数：html（要解析的字符串）, tagStyle（默认的标签样式）
  返回值：同bindparse，可作为html属性的参数
```
const Api=require("path/Parser/api.js");
Api.html2nodes("<div>Hello World!</div>").then(res=>{
  console.log(res);
})
```
- css2object
  功能：解析css字符串
  参数：style（要解析的字符串）, tagStyle（已有的样式）
  返回值：一个形如{key: value}的结构体，可作为tag-style属性的值
```
const Api=require("path/Parser/api.js");
console.log(Api.css2object(".demo{text-align:center;}"));
//{.demo:"text-align:center;"}
```
- versionHigherThan
  功能：判断当前设备的基础库版本是否高于或等于输入的版本
  参数：version（要比较的基础库版本号）
  返回值：若当前设备的基础库版本高于或等于输入的版本，返回true，否则返回false
```
const Api=require("path/Parser/api.js");
console.log(Api.versionHigherThan("2.7.1"));
```
- String.splice
  功能：对字符串的指定位置进行删改（类似于数组的splice方法）
  参数：start（开始修改的位置，为负数时表示倒数第几个）, deleteCount（要删除的字符个数）, addStr（要添加的字符串）
  返回值：修改后的字符串（该方法不改变原字符串，不需要引入文件）
```
var Str="Hello world!";
Str=Str.splice(6,1,'W');
console.log(Str);
//Hello World
```
Tips
- table, ol, ul等标签由于较难通过模板循环的方式显示，将直接通过rich-text进行渲染，因此请尽量避免在表格，列表中加入图片或链接，否则将无法预览或点击（但可以正常显示）
- 请尽量避免在一个页面中使用过多的Parser组件，由于每个Parser组件都需要对传入的html进行监听（改变时进行解析等操作），过多的监听器将占用较大的内存
- 若需要自定义链接受到点击时的效果，可对Parser/trees文件夹下的trees.wxss中的navigator-hover进行修改（默认下划线+半透明）

后端解析

本插件提供了一个配套的后端node.js支持包，可以提供更加强大的功能，如匹配多层的style，代码高亮，直接打开网址，解析markdown等，其返回值可以直接作为本组件的html属性的值；且在后端提前完成解析后可以节省解析时间，提高性能。
注意：该包需要node.js v7.6.0以上运行环境，无法直接在小程序前端使用，建议部署在服务器或云函数上
安装方法：

npm install parser-wxapp

使用方法：

const parser=require('parser-wxapp');
var html="<div>Hello World!</div>";
parser(html).then(function(res){
  console.log(res);
})

详细文档参考： npm链接

原理简介

该插件对rich-text组件进行了二次封装，对于节点下有img, video, a标签的，使用自定义组件递归的方式显示，否则直接通过rich-text组件显示，这样既解决了WxParse中过多的标签数（rich-text可以节省大量的标签），层数容易不够（自定义组件递归可以显示无限层级），无法解析表格，一些组件显示格式不正确（rich-text可以解析出更好的效果）等缺点；也弥补了rich-text图片无法预览，无法显示视频，无法复制链接，部分标签不支持（在解析过程中进行替换）等缺点，另外该解析脚本还减小了包的大小，提高了解析效率，通过包装成一个自定义组件，简单易用且功能强大。
更多可见：《小程序富文本能力的深入研究与应用》

许可

您可以随意的使用和分享本插件

更新日志

2019.8.2:
1. F 修复了部分情况下display:flex显示出错的问题
2019.7.24:
1. A 增加了autosetTitle属性，可设置是否自动将title标签的值设置到页面标题上（默认true）
2. F 修复了margin:auto失效的问题
2019.6.15:
1. F 修复了部分情况下br标签换行格式不正确的问题
2019.6.10：
1. A 适配了rich-text组件在2.7.1基础库新增加的标签，其中big、small、mark、cite、s等标签在低版本都可以兼容；bdi、bdo、caption、rt、ruby标签必须基础库2.7.1及以上才能正常显示，低版本会被转为span
2. A 增加了html2nodes（解析html）、css2object（解析css）、versionHigherThan（比较和判断基础库版本）、String.splice（对字符串指定位置进行删改）等api函数
3. A 增加了img-mode属性，可以设置为default或widthFix，设置为widthFix时，宽度不变，高度自动变化，可用于解决部分情况下图片变形的问题（但设置的高度会失效）
4. U 优化了样式匹配的优先级：tag-style<style标签<内联style样式
5. F 修复了style标签中,前后有空格时导致该样式被忽略的问题
2019.6.3:
1. A 增加了autocopy属性，用于控制是否允许a标签受到点击时自动复制链接（仅限http开头的网址链接；默认true；接近于原selectable属性的功能）
2. U 可以通过设置selectable属性控制是否允许长按复制任意内容（默认false)
3. F 修复了style标签内容过长时安卓机可能出现栈溢出的问题
2019.6.1:
1. F 修复了部分情况下width设置为百分比时失效的问题
2019.5.24:
1. U 通过以自定义组件递归的方式替代了模板循环，精简包的大小至28.1KB，且不再受层数限制
2. D 删除了html-class和html-style属性，支持直接对Parser标签设置class和style，默认的display是block
3. F 修复了部分情况下节点的display和float可能不生效的问题
4. F 修复了背景音乐无法播放的问题（设置autoplay），并支持对多个audio设置autoplay
2019.5.22:
1. U bindready回调将返回整个组件的NodeRef结构体，包含了宽度、高度、位置等信息
2. U 提高了传入的html类型为Array或Object时的渲染速度（约10%）
3. U 解析时若存在video或audio组件既没有controls属性也没有autoplay属性，会向控制台打印“可能不能播放”的警告
2019.5.20:
1. A 增加支持source标签（仅限用于audio和video标签中），设置多个source的，会按顺序进行加载，加载失败的，自动加载下一条链接
2. U video标签增加支持autoplay和muted属性
3. U audio标签增加支持autoplay属性（仅允许自动播放一首音乐，若设置多首将仅自动播放第一首）
4. F 修复了视频数量超过3时，后面的视频无法播放的问题
2019.5.19:
1. A 增加了html-style属性，可以对整个富文本容器设置style样式，可通过wxml的数据绑定实现动态修改（直接在style中设置可能不生效）
2. A 增加了show-with-animation和animation-duration属性，支持在显示时使用渐显动画
2019.5.17:
1. A 增加了bindready回调，渲染完成时调用
2. A 增加了binderror回调，解析错误或加载多媒体资源出错时调用
2019.5.15:
1. F 修复了一个页面内存在多个Parser组件时，imgList被覆盖而导致预览失效的问题
2. F 修复了图片设置float属性无效的问题
2019.5.14:
1. A 增加了html-class属性，可以对整个富文本容器设置样式，包括display、margin、padding等
2. D 删除了scroll属性，默认内容宽度超出页面时允许横向滚动，如要禁止滚动可在html-class中设置overflow:hidden !important
3. F 修复了实体编码的空格&nbsb;在部分情况下失效的问题
2019.5.10:
1. A 增加了autopause属性，支持选择是否允许在播放视频时自动暂停其他视频播放
2. U 在视频数量超过3时，仅加载前3个，其他的由图片取代，在受到点击时再进行加载和播放，避免页面卡死
3. U 在完成样式匹配后移除了节点的class和id属性，减小了nodes数组的大小，加快渲染速度
2019.5.6:
1. A 发布了后端node.js支持包
2. U 支持在Parser组件内加入加载提示或动画，将在未加载完成或内容为空时显示，加载完成后自动隐藏
2019.4.29:
1. A 增加支持将title标签中的内容设置到页面标题上，并在bindparse回调中返回（可用于转发分享）
2. A 增加scroll属性，可以选择是否允许页面横向滚动
3. U style标签中的样式支持更多匹配模式（包括单层多个.demo1.demo2和多个并列.demo1,.demo2等，另外对于伪类、多层的以及含有@或*的将直接忽略）
4. F 修复了已知bug
2019.4.28:
1. U 优化图片显示效果，对没有设置宽高的图片，按原大小显示（最大不超过100%）；设置了宽度或高度之一的，按比例进行缩放；同时设置了宽度和高度的，按设置的值进行拉伸；图片无法显示时，可以显示alt属性中的文本；但由于这些特性需要通过rich-text显示，因此取消了lazyload属性
2. U 优化了a标签的内联效果
2019.4.26:
1. A 增加支持pre, u, center, source等标签
2. A 增加bindlinkpress回调函数，在链接受到点击时触发，开发者可以在此回调中进行进一步操作（如下载和打开文档等）
3. U 对于不在支持列表中的标签，除个别直接移除外，都会被转为div标签，因此可以使用一些语义化标签，如article, address等
4. U 提高了解析效率和渲染效率（约10%）
5. D 删除了preview属性，默认允许图片预览
6. D 删除了space属性，由于设置连续空格会使得标签间的空格都被显示，导致错误的效果，因此取消了这一属性；如需要显示连续空格，请使用实体编码的空格或设置white-space属性
7. F 修复了已知bug
2019.4.21：
1. A 增加了tagStyle属性，支持对标签设置自定义样式
2. A 发布了demo小程序
3. U 降低了最低基础库的要求
4. F 修复了已知bug
2019.4.18：
1. A 增加支持audio标签
2. A 增加支持图片懒加载（lazyload属性）
3. U 优化a，code，blockquote等标签显示效果
4. F 修复了已知bug
2019.4.16：
1. U 精简插件包的大小
2. F 修复已知bug
2019.4.14：
1. U style标签中的样式支持按标签名匹配，如body{ Object }

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
Parser		Parser
images		images
pages		pages
README.md		README.md
app.js		app.js
app.json		app.json
app.wxss		app.wxss
sitemap.json		sitemap.json
weui.wxss		weui.wxss

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parser

Parser

images

images

pages

pages

README.md

README.md

app.js

app.js

app.json

app.json

app.wxss

app.wxss

sitemap.json

sitemap.json

weui.wxss

weui.wxss

Repository files navigation

Parser

立即体验

功能介绍

使用方法

后端解析

原理简介

许可

更新日志

About

Releases

Packages

Languages

版本	功能	覆盖率
>=2.2.5	全部正常	98.96%
1.6.3-2.2.4	部分html实体无法显示	1.00%
<1.6.6	无法使用	0.04%

billzbc/Parser

Folders and files

Latest commit

History

Repository files navigation

Parser

立即体验

功能介绍

使用方法

后端解析

原理简介

许可

更新日志

About

Resources

Stars

Watchers

Forks

Languages