记不住的小操作

ifram标签转换为video标签 富文本展示

<template>
	<view>
		<view class="commonList">
			<view class="CommonItem">
				<view style="font-weight: bold;margin-bottom: 20rpx;">{{textContent.name}}</view>
				<!-- <view class="htmlContent" v-html="attDir"></view> -->
				
				<view class="content" v-for="(item, index) in attDir" :key="index">
				    <view v-if="item.type=='rich-text'" v-html="item.value" class='content'></view>
				    <video v-if="item.type=='video' && item.value" :src="item.value"
				            style="width:100%;height: 150px" frameborder="0"></video>
				</view>
				
				<!-- <u-parse :content="textContent.attDir"></u-parse> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textContent: '',
				attDir: '',
			};
		},
		// 小程序样式改不动时，使用这个
		options: {
			styleIsolation: 'shared'
		},
		onLoad(options) {
			let that = this
			uni.getStorage({
				key: 'text',
				success: function(res) {
					that.textContent = res.data
					that.attDir = that.textContent.attDir.replace(/\<img/g,
						'<img style="max-width:100%;height:auto" ');
					that.attDir = that.getVideo(that.Reluts(that.attDir)) 
				}
			})
		},
		methods: {
			// 富文本视频解析
			getVideo(data) {
				let videoList = [];
				let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签

				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
				let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
				let articleList = data.split('</video>') // 把字符串  从视频标签分成数组
				arr.forEach((item, index) => {
					var src = item.match(srcReg);
					videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径
				})
				let needArticleList = [];
				articleList.forEach((item, index) => {
					console.log(item)
					if (item != "" && item != undefined) { //  常见的标签渲染
						needArticleList.push({
							type: 'rich-text',
							value: item + "</video>"
						});
					}
					let articleListLength = articleList.length; // 插入到原有video 标签位置
					if (index < articleListLength && videoList[index] != undefined) {
						needArticleList.push({
							type: 'video',
							value: videoList[index]
						})
					}
				})
				return needArticleList
			},
			// 正则替换
			Reluts(str) {
				let outstr = str.replace(/<iframe [^>]*src=['"]([^'"]+)[^>]*><\/iframe>/g, function(match, capture) {
					if (match.indexOf('ql-video') != -1 && capture.indexOf('.mp4') != -1) {
						return `<video class="ql-video" controls="controls" style="width: 100%" poster="${capture}?vframe/jpg/offset/0/w/480" type="video/mp4" src="${capture}">`
					} else {
						return match
					}
				});
				return outstr
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.commonList {
		width: 100%;

		.CommonItem {
			text-align: center;
			padding: 20rpx;
			background: #fff;
		}
	}

	::v-deep .htmlContent {
		font-size: 28rpx;
		text-align: left;
		padding: 10rpx 0;

		p {
			width: 100% !important;
			line-height: 56rpx;
		}

		img {
			max-width: 100% !important;
		}
	}
</style>