uniapp解析富文本，视频无法显示问题

1. uniapp解析富文本，视频无法显示问题

  rich-text 无法处理 video，uni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么（参考文档），其中并不包含 video 。

1.1. 解决办法

  在uni-app插件市场搜索parse插件使用。
  parse插件有很多，包含的功能也不尽相同。
  我播放 video 时使用的是uParse 富文本解析。

1.1.1. uParse 富文本解析插件的使用

  （1）在项目中导入插件。这步不详述了。不会的需要补补关于uniapp的使用知识。导入成功后，多出目录项目根目录/components/u-parse。
  （2）在页面中导入插件。

import uParse from '@/components/u-parse/u-parse.vue';

  （3）替换rich-text

<!-- <rich-text :nodes="content"></rich-text> -->
<u-parse :content="content" />

1.1.2. 处理 vedio 标签样式

  默认的vedio样式需要修改时，可以使用正则表达式替换。。
  （1）新建 js 文件 ： richTextUtil.js

语法说明
标题文本样式列表图片链接目录代码片表格注脚注释自定义列表LaTeX 数学公式插入甘特图插入UML图插入Mermaid流程图插入Flowchart流程图插入类图快捷键
代码片复制

下面展示一些 内联代码片。

/*** 处理富文本里的图片宽度自适应* 1.去掉img、video标签里的style、width、height属性* 2.修改所有style里的width属性为max-width:100%* 3.img、video标签添加style属性：max-width:100%;height:auto* 4.去掉<br/>标签* @param html* @return string*/
function formatRichText (html) {// 去掉img标签里的style、width、height属性let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 去掉video标签里的style、width、height属性newContent= html.replace(/<video[^>]*>/gi,function(match,capture){match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});// 修改所有style里的width属性为max-width:100%// 去掉所有style里的font-size属性newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');match = match.replace(/font-size:[^;]+;/gi, '');return match;});// 去掉<br/>标签newContent = newContent.replace(/<br[^>]*\/>/gi, '');// img标签添加style属性：max-width:100%;height:autonewContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');// video标签添加style属性：max-width:100%;height:autonewContent = newContent.replace(/\<video/gi, '<video style="max-width:100%;height:auto;display:block;margin:0px auto;"');return newContent;
}export default {formatRichText,
};

  （2）引入js库

import richTextUtil from '@/common/richTextUtil.js';

  （3）调用方法

this.content = richTextUtil.formatRichText(res.content);