Parser

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

立即体验

功能介绍

• 支持解析<style>标签中的全局样式
  支持按标签名匹配（body{...}）、按class匹配（.demo{...}）、按id匹配（#demo{...}）；但仅支持一层，如.demo1 #demo2{...}仅会被解析为.demo1{...}

  <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>" tagStyle="{{tagStyle}}" />
  

  

• 支持解析各类实体编码

  <span>&#x8FD9;&#x662F;&#x5B9E;&#x4F53;&#x7F16;&#x7801;</span>
  

  

• 支持代码高亮

  <Parser html='<pre language="javascript">function test{ console.log("Hello World!") }</pre>' />
  

  

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

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

  另外，对于不在支持列表中的标签，除个别会直接移除外，都会被转换为div标签，因此可以使用一些语义化标签，如article, address等

• 图片支持大小自适应，点击图片可以预览（预览时通过左右滑动可以查看所有图片）；对于一些装饰性的图片，可以对其设置ignore属性，设置后将无法预览

  

• 点击a标签，若href为小程序内部页面路径，将直接跳转；若是网页链接，则长按可以复制链接，并在浏览器中打开；点击时将有下划线和半透明的效果，支持图片链接。链接被点击时会触发bindlinkpress事件，可以在该回调中进行下载附件等更多操作
  

• 支持解析有序列表和无序列表（直接由rich-text进行显示）
  

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

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

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

使用方法

1. 下载Parser文件夹至小程序目录（其中prism.js是可选的代码高亮支持包）
   

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

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

3. 在需要引用的页面的wxml文件中添加

   <Parser html="{{html}}" />
   

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

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

• 组件属性：

  属性	类型	默认值	必填	说明
  html	String/Object/Array		是	要显示的富文本数据，具体格式见下方说明
  selectable	Boolean	true	否	是否允许长按复制链接
  tagStyle	Object	{}	否	设置标签的默认样式

  • html格式：
    1. string类型：一个html字符串，例如：<div>Hello World!</div>
    2. object类型：一个形如{ nodes:[Array],imgList:[Array] }的结构体，其中nodes数组的格式基本同rich-text，对于该节点下有img，video，a标签的，需要将continue属性设置为true，否则将直接使用rich-text组件渲染，可能导致图片无法预览，链接无法点击等问题，imgList为其中所有图片地址的数组（回调函数bindparser的返回值就是这样的结构体）
    3. array类型：格式要求同上（用此格式传入预览图片时，将不能通过左右滑动查看所有图片）
    4. 使用b, c方法可以节省解析的时间，提高性能
  • 关于tagStyle
    可以设置标签的默认样式，如{ body:"margin:5px" }

• 高亮支持包
  有显示源代码需要的，可以引入代码高亮支持包prism.js，引入后对于pre标签内的代码可以高亮显示（需要设置language属性，否则没有高亮效果），例如<pre language="javascript">...</pre>，目前支持的语言有javascript, css, html, xml等，如需要更多语言支持，请前往prismjs官网下载对应语言的支持包并替换此文件

• 回调函数

  名称	功能	说明
  bindparser	在解析完成时调用（仅当传入的html为字符串时会调用）	返回一个object, 其中nodes为解析后的节点数组， imgList为图片列表，该object可以在下次调用直接作为html属性的值，节省解析的时间
  bindlinkpress	在链接受到点击时调用	返回该链接的href值，开发者可以在该回调中进行进一步操作，如下载文档和打开等

  • 其他
    table, ol, ul等标签由于较难通过模板循环的方式显示，将直接通过rich-text进行渲染，因此请尽量避免在表格，列表中加入图片或链接，否则将无法预览或点击（但可以正常显示）

  • 关于基础库

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

后端解析

为提高页面性能，可以在服务器端提前解析好html，该插件同样可以在node.js中使用（只需要Parser文件夹下的 DomHandler.js, Parser.js, Tokenizer.js即可）
具有的功能：

1. 删除不支持的节点和属性
2. 将tagStyle参数和style标签中的样式解析到各标签的style中，例如：

const Parser=require('./Parser.js');
var html='<style>.demo{text-align:center}</style><div class="demo">Hello World!</div>';
var tagStyle={
  div:"margin-left:5px;"
}
Parser(html,tagStyle).then(function(e){
  console.log(e)
})

{ 
  "nodes": [{ 
    "name": "div", 
    "attrs": {
      "class": "demo",
      "style": "margin-left:5px;text-align:center"
    }, 
    "children": [{ 
      "text": "Hello World!", 
      "type": "text" 
    }] 
  }],
  "imgList": [] 
}

3. 对于一些rich-text不支持的组件进行替换
4. 将section标签用div取代
5. 对a, img, code, pre, blockquote等一些标签设置默认效果
6. 对于该节点下含有a, img（没有设置ignore属性时）, video标签等的，continue的值会被设置为true（用于前端显示）
7. 解析完成将返回一个形如{ nodes:[Array], imgList:[Array] }结构体,其中nodes数组可以直接应用于rich-text组件，整个结构体可以直接作为Parser组件的参数

原理简介

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

链接

富文本插件体验小程序 - 微信社区
新富文本显示插件 - 微信社区

许可

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

更新日志

• 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. A 增加支持代码高亮
  4. U 对于不在支持列表中的标签，除个别直接移除外，都会被转为div标签，因此可以使用一些语义化标签，如article, address等
  5. U 提高了解析效率和渲染效率（约10%）
  6. D 删除了preview属性，默认允许图片预览
  7. D 删除了space属性，由于设置连续空格会使得标签间的空格都被显示，导致错误的效果，因此取消了这一属性；如需要显示连续空格，请使用实体编码的空格，如 ,  等
  8. 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 }