uni-app富文本渲染方案rich-text、uparse、v-html简单解析 - huihuihero - 博客园 https://www.cnblogs.com/huihuihero/p/12978903.html

uniapp 完美解析富文本_A腿长一米二的博客-CSDN博客 https://blog.csdn.net/weixin_47284756/article/details/114837803

uni-app富文本渲染方案rich-text、uparse、v-html简单解析

uniapp语法：rich-text

1、rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。
2、API参考https://uniapp.dcloud.io/component/rich-text
3、rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事件，无法对富文本中的图片、超链接单独设点击事件。
（这个缺陷有点严重，因为这个缺陷，一般不建议使用，除非你的富文本内容是单纯提供给用户浏览的）
4、h5和nvue支持图片、超链接单独点击。
5、app-nvue只能使用rich-text。

vue语法：v-html

1、在uni-app中，h5端和app-vue的v3编译器下可以使用v-html 2、小程序不支持此语法

万能的业内大佬：uparse

1、全端支持，除了nvue

总结

1、rich-text有很大弊端（不支持富文本内点击事件），若富文本里有可点击事件，则不推荐使用 2、v-html在小程序中不支持。若项目不包含小程序，则推荐使用v-html。（记得使用v3编译器,2.7.5版本+的HBuildX已默认使用v3编译，无需自定义设置） 3、uparse全端支持，但不支持nvue。若项目包含app,小程序，则推荐使用uparse。然后在nvue页面另行使用rich-text即可。

uparse使用方法

import uParse from ‘@/components/gaoyia-parse/parse.vue’ //引入组件

export default { components: { uParse //注册组件 }, data () { return { article: ‘

html代码，具体参见https://github.com/gaoyia/parse/tree/1.0.7/parse-demo中的demo

‘ } }, methods: { preview(src, e) { //事件：点击富文本里的图片 // do something }, navigate(href, e) { //事件：点击富文本里的链接 // do something } } }

//在APP.vue中引入，否则样式不能生效

若不想单页面引入组件，也可全局注册组件：在main.js中

import uParse from ‘@/components/gaoyia-parse/parse.vue’ Vue.component(‘u-parse’,uParse) 在其它页面即可 调用了

  2. <a name="k9IYT"></a>
  3. ## uniapp 完美解析富文本
  4. 1.首先我们把解析富文本的js文件引入到页面里 并且定义一个值接收遍历后的文本（我们这里起一个名字叫demoHtml）<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/349593/1630491427585-0a9bd96d-7feb-4223-b452-79cbf4bf51d0.png#clientId=u22d0bbed-2443-4&from=paste&id=u97a5b1d5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=429&originWidth=624&originalType=url&ratio=1&size=48286&status=done&style=none&taskId=uaa57ce66-5ed1-440b-af10-dfe6d7aaa0f)
  5. ```typescript
  6. var graceRichText = require("../../static/richText.js");
  1. /*
  2. graceUI rich-text 加强工具
  3. */
  5. // 正则变量
  6. var graceRichTextReg;
  8. // 批量替换的样式 [ 根据项目需求自行设置 ]
  9. var GRT = [
  10.     // div 样式
  11.     ['div', "line-height:2em;"],
  12.     // h1 样式
  13.     ['h1', "font-size:3em; line-height:1.5em;"],
  14.     // h2 样式
  15.     ['h2', "font-size:2em; line-height:1.8em;"],
  16.     // h3 样式
  17.     ['h3', "font-size:1.6em; line-height:2em;"],
  18.     // h4 样式
  19.     ['h4', "font-size:1.2em; line-height:2em;"],
  20.     // h5 样式
  21.     ['h5', "font-size:1em; line-height:2em;"],
  22.     // h6 样式
  23.     ['h6', "font-size:0.9em; line-height:2em;"],
  24.     // p 样式
  25.     ['p', "font-size:1em; line-height:2em;"],
  26.     // b 样式
  27.     ['b', "font-size:1em; line-height:2em;"],
  28.     // strong 样式
  29.     ['strong', "font-size:1em; line-height:2em;"],
  30.     // code 样式
  31.     ['code', "font-size:1em; line-height:1.2em; background:#F6F7F8; padding:8px 2%; width:96%;"],
  32.     // img 样式
  33.     ['img', "width:100%; margin:8px 0;"],
  34.     // blockquote
  35.     ['blockquote', "font-size:1em; border-left:3px solid #D1D1D1; line-height:2em; border-radius:5px; background:#F6F7F8; padding:8px 2%;"],
  36.     // li 样式
  37.     ['ul', "padding:5px 0; list-style:none; padding:0; margin:0;"],
  38.     ['li', "line-height:1.5em; padding:5px 0; list-style:none; padding:0; margin:0; margin-top:10px;"],
  39.     // table
  40.     ['table', "width:100%; border-left:1px solid #F2F3F4; border-top:1px solid #F2F3F4;"],
  41.     ['th', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4;"],
  42.     ['td', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4; padding-left:5px;"]
  43. ];
  46. module.exports = {
  47.     format : function(html){
  48.         html = html.replace(/<pre.*pre>?/gis, function(word){
  49.             word =  word.replace(/[\n]/gi,'<br />');
  50.             word =  word.replace(/    /gi,'<span style="padding-left:2em;"></span>');
  51.             return word.replace(/[\t]/gi, '<span style="padding-left:2em;"></span>');
  52.         });
  53.         html = html.replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"');
  54.         html = html.replace(/<\/pre/gi,"</p");
  55.         for(let i = 0; i < GRT.length; i++){
  56.             graceRichTextReg = new RegExp('<'+GRT[i][0]+'>|<'+GRT[i][0]+' (.*?)>', 'gi');
  57.             html = html.replace(graceRichTextReg , function(word){
  58.                 // 分析 dom 上是否带有 style=""
  59.                 if(word.indexOf('style=') != -1){
  60.                     var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
  61.                     return word.replace(regIn, '<'+ GRT[i][0] +'$1style="$2 ' + GRT[i][1] +'"$3$4>');
  62.                 }else{
  63.                     var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
  64.                     return word.replace(regIn, '<'+ GRT[i][0] +'$1 style="' + GRT[i][1] +'$2">');
  65.                 }
  66.             });
  67.         }
  68.         return html;
  69.     }
  71. }

2.创建响应函数
某个方法

  1.         let that=this
  2.         uni.request({
  3.             url:'http://grace.hcoder.net/richTextDemo.php',
  4.             success:function(res){
  5.                 // 强化 richText
  6.                 that.demoHtml = graceRichText.format(res.data);
  7.             }
  8.         });

3.将得到的值渲染到页面上

  1. <rich-text type="text" :nodes="demoHtml"></rich-text>

这样就可以完美解析了