im-uniapp/uni_modules/sv-editor/components/common/parse.js

/**
 * 富文本解析工具
 * @author sonve
 * @version 1.0.0
 * @date 2024-12-04
 */

import config from './config.js'

/**
 * 将含有封面占位图形式的视频富文本转换成正常视频的富文本
 * @param {String} richText 要进行处理的富文本字符串
 * @returns {String} 返回处理结果
 */
export function parseHtmlWithVideo(richText) {
	// 正则表达式匹配<img>标签及其属性
	const imgRegex = /<img\s+([^>]+)>/gi;
	// 正则表达式匹配data-custom属性中的url值
	const customUrlRegex = /\bdata-custom="[^"]*url=([^&"]+)/i;

	return richText.replace(imgRegex, (match, attrs) => {
		// 查找data-custom属性中的url值
		const urlMatch = attrs.match(customUrlRegex);
		if (urlMatch) {
			// 获取data-custom中的url
			const videoUrl = urlMatch[1];

			// 解析出所有属性
			const attrArray = attrs.split(/\s+/).filter(attr => attr.trim() !== '');

			// 过滤掉src属性和data-custom属性
			const newAttrs = attrArray.filter(attr => !attr.startsWith('src=') && !attr.startsWith('data-custom='))
				.join(' ');

			// 构建新的video标签，保留原有的其他属性，但去除src和data-custom
			return `<video controls ${newAttrs}><source src="${videoUrl}" /></video>`;
		}
		// 如果没有匹配到data-custom中的url，则保持原样
		return match;
	});
}

/**
 * 带有视频的富文本逆向转换
 * @description 可自定义处理封面
 * @param {Promise} richText 要转换的富文本
 * @param {Function<Promise>} customCallback 自定义处理封面回调，需要return封面图片资源，自带参数为视频地址
 * @returns {Promise} 转换后的富文本 注意异步处理
 */
export async function replaceVideoWithImageRender(richText, customCallback) {

	// 正则表达式用于匹配 <video> 标签以及其内部的 <source> 标签
	const videoRegex = /<video\s+([^>]+)>(.*?)<\/video>/gi;

	// 找到所有的 <video> 标签
	const matches = [];
	let match;
	while ((match = videoRegex.exec(richText)) !== null) {
		matches.push(match);
	}

	// 并行处理每个 <video> 标签，生成对应的缩略图
	const replacements = await Promise.all(
		matches.map(async (match) => {
			const [fullMatch, attributes, content] = match;

			// 匹配 <source> 标签中的 src 属性
			const sourceRegex = /<source\s+[^>]*src="([^">]+)"/i;
			const matchSource = content.match(sourceRegex);

			let videoUrl = '';
			if (matchSource && matchSource.length > 1) {
				videoUrl = matchSource[1];
			}

			// 生成视频封面图
			let thumbnailRes
			if (customCallback) thumbnailRes = await customCallback(videoUrl) // 自定义封面处理
			if (!thumbnailRes) thumbnailRes = config.video_thumbnail // 无效值则默认封面处理

			// 过滤掉不需要的属性，例如 controls
			const filteredAttributes = attributes
				.split(/\s+/)
				.filter(attr => !attr.startsWith('controls'))
				.join(' ');

			// 构建新的 img 标签，继承 video 的属性（除了 controls）并添加 data-custom 属性
			const imgTag = `<img ${filteredAttributes} src="${thumbnailRes}" data-custom="url=${videoUrl}" />`;

			return { fullMatch, imgTag };
		}));

	// 使用 replacements 替换原始的 <video> 标签
	let result = richText;
	for (const { fullMatch, imgTag } of replacements) {
		result = result.replace(fullMatch, imgTag);
	}

	return result;
}

/**
 * 解析出富文本中的图片和视频
 * @param {String} richText 要解析的富文本
 * @returns {Array} 图片和视频数组
 */
export function parseImagesAndVideos(richText) {
	// 创建一个空数组用于存储图片和视频信息
	const result = [];

	// 正则表达式匹配 <img> 标签及其属性
	const imgRegex = /<img\s+[^>]*>/gi;
	// 匹配属性名和值的正则表达式，改进后的版本可以处理属性名中包含连字符的情况
	const attrRegex = /(\w+(-\w+)*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'<>]+))/gi;

	// 找到所有的 <img> 标签
	const matches = richText.match(imgRegex);
	// 如果没有找到任何 <img> 标签，返回空数组
	if (!matches) return [];

	// 遍历所有的 <img> 标签
	matches.forEach(match => {
		// 创建一个对象用于存储单个图片或视频的信息
		const ivInfo = {};
		// 使用正则表达式匹配每个 <img> 标签的属性
		let attrsMatch;
		while ((attrsMatch = attrRegex.exec(match)) !== null) {
			// 属性名
			const name = attrsMatch[1].toLowerCase();
			// 属性值可能存在于第三、第四或第五个捕获组中
			let value = attrsMatch[3] || attrsMatch[4] || attrsMatch[5] || '';

			// 去除属性值两端可能存在的引号
			if (value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'")) {
				value = value.substring(1, value.length - 1);
			}

			// 将属性名和值添加到 ivInfo 对象中
			ivInfo[name] = value;
		}
		// 将单个图片或视频信息添加到数组中
		result.push(ivInfo);
	});

	// 返回包含所有图片和视频信息的数组
	return result;
}

/**
 * 解析出富文本中的图片
 * @param {String} richText 要解析的富文本
 * @returns {Array} 图片数组
 */
export function parseImages(richText) {
	let result = []
	const ivList = parseImagesAndVideos(richText)
	ivList.forEach(item => {
		if (!item['data-custom'] || !item['data-custom'].startsWith('url')) {
			result.push(item)
		}
	})
	return result
}

/**
 * 解析出富文本中的视频
 * @param {String} richText 要解析的富文本
 * @returns {Array} 视频数组
 */
export function parseVideos(richText) {
	let result = []
	const ivList = parseImagesAndVideos(richText)
	ivList.forEach(item => {
		if (item['data-custom'] && item['data-custom'].startsWith('url')) {
			result.push(item)
		}
	})
	return result
}