uniapp:富文本图片/视频/音频路径前加地址端口

this.huiy = this.dealTxt(this.info.contentInfo) // 富文本字段
​
​
dealTxt(htmlStr) {
				console.log('htmlStr', htmlStr) // 从接口获取到富文本内容
				let apiSource = 'https://8080'; // 地址端口
				const _imgL = '<img src="';
				const _video = '<video src="'
				const _href = '<a href="'
			
				if (htmlStr) {
					// 解析富文本,获取所有图片标签或链接
					const regex = /<img.*?src=["'](.*?)["']/g;
					const images = [];
					let match;
					while ((match = regex.exec(htmlStr)) !== null) {
						images.push(match[1]);
					}
					// 遍历每个图片链接,判断是否有前缀
					for (const image of images) {
						if (image.startsWith('http://') || image.startsWith('https://')) {
							console.log(`${image} 包含前缀`);
						} else {
							console.log(`${image} 不包含前缀`);
							// 给没有前缀的图片URL添加apiSource前缀
							if (htmlStr.includes(_imgL)) {
								htmlStr = htmlStr.replace(/<img src=\"/g,
									'<img style="width:100%;height:auto" class="ui-iva" src="' + apiSource)
								console.log(htmlStr.includes(_imgL), '=====')
							}
						}
					}
					if (htmlStr.includes(_video)) {
						htmlStr = htmlStr.replace(/<source src=\"/g, '<source src="ui-iva' + apiSource)
					}
					if (htmlStr.includes(_href)) {
						htmlStr = htmlStr.replace(/<a href=\"/g, '<a href="' + apiSource)
					}
			
				}
				console.log('htmlStr', htmlStr)
				return htmlStr;
			},

​

​

2.

dealTxt(htmlStr) {
			    let apiSource = this.risun.info.source; // 地址端口
			    const imgRegex = /<img[^>]+src="([^">]+)"/g;
			    const videoRegex = /<video[^>]*>/g;
			    const sourceRegex = /<source[^>]+src="([^">]+)"/g;
			    const hrefRegex = /<a[^>]+href="([^">]+)"/g;
			
			    if (htmlStr) {
			        htmlStr = htmlStr.replace(imgRegex, (match, src) => {
			            return `<img src="${apiSource}${src}"`;
			        });
			
			        htmlStr = htmlStr.replace(videoRegex, '');
			
			        htmlStr = htmlStr.replace(sourceRegex, (match, src) => {
			            return `<video style="width:100%;" src="${apiSource}${src}"`;
			        });
			
			        htmlStr = htmlStr.replace(hrefRegex, (match, href) => {
			            return `<a href="${apiSource}${href}"`;
			        });
			    }
			
			    return htmlStr;
			},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uniapp中解析富文本可以使用第三方库marked.js和html-parser.js。其中,marked.js可以将Markdown格式的文本转换为HTML格式,而html-parser.js可以将HTML格式的文本解析为uniapp的视图组件。 1. 安装marked.js和html-parser.js 可以通过npm安装这两个库: ``` npm install marked html-parser ``` 2. 引入marked.js和html-parser.js 在需要使用这两个库的页面或组件中,引入marked.js和html-parser.js: ```javascript import marked from 'marked'; import htmlParser from 'html-parser'; ``` 3. 将Markdown文本转换为HTML文本 使用marked.js将Markdown格式的文本转换为HTML格式: ```javascript const htmlText = marked(markdownText); ``` 其中,markdownText是Markdown格式的文本,htmlText是转换后的HTML格式的文本。 4. 解析HTML文本为uniapp的视图组件 使用html-parser.js将HTML格式的文本解析为uniapp的视图组件: ```javascript const nodes = htmlParser.parse(htmlText); ``` 其中,htmlText是HTML格式的文本,nodes是解析后的uniapp的视图组件。 5. 在页面中渲染解析后的视图组件 将解析后的视图组件渲染到页面中: ```html <template> <view> <import src="../components/wemark/wemark"></import> <wemark> <template> <!-- 解析后的视图组件 --> {{ nodes }} </template> </wemark> </view> </template> <script> import marked from 'marked'; import htmlParser from 'html-parser'; export default { data() { return { nodes: [] } }, onLoad() { const markdownText = '# Hello World'; const htmlText = marked(markdownText); this.nodes = htmlParser.parse(htmlText); } } </script> ``` 在上面的例子中,我们使用了第三方组件wemark来渲染解析后的视图组件。当然,你也可以使用其他的组件或自定义组件来渲染解析后的视图组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_木棠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值