mp-html原生小程序富文本解析器框架

前端小凯

已于 2024-07-28 00:18:31 修改

阅读量32

点赞数 1

文章标签：小程序前端 javascript

于 2024-07-27 16:48:51 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/140721494

版权

第一步：放入components里面mp-html的源码

第二步：在页面.json引入组件

"mp-html": "/components/mp-html"

第三步：使用组件

<mp-html class="desc" content="{{ content }}" />

属性：

属性	说明
content	要解析的内容

js处理content的数据：

if (res.data.content) {
  let str = res.data.content // 里面的P标签和img标签添加class并去除掉img里面的宽高属性
  let reg = /<p/g     // 匹配P标签
  let reg2 = /<img/g  // 匹配img标签
  var reg3 = /width="[0-9]*"\sheight="[0-9]*"/g;  //      匹配图片的宽高
  let insertStr = "class='text'"  // p标签添加的class
  let insertStr2 = "class='image' style='width:100%;'"    // img标签添加的class
  let str2 = str.replace(reg, "<p " + insertStr)  // 给P标签加上class='text'
  str2 = str2.replace(reg3, "");  // 去掉图片的宽高
  res.data.content = str2.replace(reg2, "<img " + insertStr2) // 给P标签加上class='image'
}