Mina_B/miniprogram/component/richTextView/richTextView.ts

// component/richTextView/richTextView.ts
Component({

	/**
	 * 组件的属性列表
	 */
	properties: {
		text: {
			type: String,
			value: ''
		}
	},
	observers: {
		text: function (value: string) {
			if (value) {
				const videoArr: (string | null)[] = []
				const contentArr: string[] = []
				// 同步解决如果图片太大超出手机显示界面的问题
				const nodes = value.replace(/<blockquote/g, "<blockquote style=\"width:100%;background-color: #f5f2f0;border-left: 8px solid #B4D5FF;display: block;font-size: 100%;line-height: 1.5;margin: 10px 0;padding: 10px;box-sizing: border-box;\"").replace(/<hr\/>/g, "<div style=\"border-radius: 3px;margin: 20px auto;padding: 20px 10px;\"><hr style=\"background-color:#ccc;border: 0;display: block;height: 1px;\"/></div>").replace(/<img [^>]*style=['"]*([^'"]+)[^/>]*/g, (match) => {
					return match.replace(/ style=['"]([^'"]+)*/g, " style=\"$1max-width:100%;height:auto;");
				});
				const arr = nodes.split("</video>");
				const reg = /<video([\s\S]*)/g;
				for (const i in arr) {
					const item = arr[i];
					const urlMatch = item.match(/<video[\s\S]*src="(.*?)"/);
					if (urlMatch && urlMatch.length > 1) {
						videoArr[i] = urlMatch[1];
					} else {
						videoArr[i] = null;
					}
					contentArr[i] = item.replace(reg, "");
				}
				this.setData({
					videoArr,
					contentArr
				})
			}
		}
	},
	/**
	 * 组件的初始数据
	 */
	data: {

	},

	/**
	 * 组件的方法列表
	 */
	methods: {

	}
})