parser-wxappdeprecated

微信小程序富文本插件

Usage no npm install needed!

<script type="module">
  import parserWxapp from 'https://cdn.skypack.dev/parser-wxapp';
</script>

README

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以上运行环境，不能直接在小程序前端使用，建议部署在云函数或服务器上，将解析结果返回前端显示

功能介绍

  1. 支持解析和匹配 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

  2. 与前端组件 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 文件，否则将被忽略

  3. 支持解析各类实体
    支持解析各类 html 实体编码（包括中文）

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

    解析实体

  4. 支持代码高亮
    支持自动识别语言并进行高亮显示，可自行选择高亮风格(详细可以查看 highlightjs官网）
    示例：

    var html=`<pre>function demo(){
  console.log("Hello World!");
}</pre>`
return await parser(html,'html',{styles:"atom-one-dark"});

    代码高亮

  5. 智能压缩
    支持自动对解析结果进行压缩，包括合并一些只有一个子节点的标签，移除display:none的标签，移除空标签，消除重复的 style 样式等方法，可有效减小大小，加快传输速度和渲染速度

  6. 支持自动将地址填充完整
    对于多媒体标签的 src 属性，如果以 / 开头，将自动填充上主域名，避免在小程序中无法显示（可以在 options.domain 中设置，解析模式为 website 时会自动获取）
    示例：

    await parser("<img src='/path/demo.jpg'>","html",{domain:"https://example.com"});
//https://example.com/path/demo.jpg

  7. 支持 website 模式
    输入网址即可显示其内容，仅能用于简单的静态网页（在 js 中动态加载的内容将被忽略） 示例：

    await parser("https://example.com","website");

  8. 支持 markdown 模式
    支持解析 markdown，包括表格，代码高亮等

    # 示例
| 标题1 | 标题2 |
|:---:|:---:|
| 栏目1 | 栏目2 |

    markdown模式

  9. 支持 file 模式
    支持输入文件路径即可自动打开文件并进行解析（仅支持 html 文件或 md 文件）
    示例：

    return await parser(path.join(__dirname,'demo.html'),"file");

立即体验

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

更新日志

  • 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 标签的问题