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）在页面中导入插件。

javascript 复制代码

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

（3）替换rich-text

javascript 复制代码

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

1.1.2. 处理 vedio 标签样式

默认的vedio样式需要修改时，可以使用正则表达式替换。。

（1）新建 js 文件： richTextUtil.js

语法说明

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

代码片复制

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

javascript 复制代码

/**
 * 处理富文本里的图片宽度自适应
 * 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:auto
	newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
	// video标签添加style属性：max-width:100%;height:auto
	newContent = newContent.replace(/\<video/gi, '<video style="max-width:100%;height:auto;display:block;margin:0px auto;"');
	return newContent;
}

export default {
	formatRichText,
};

（2）引入js库

javascript 复制代码

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

（3）调用方法

javascript 复制代码

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