js正则表达式修改富文本里面的标签样式

最新推荐文章于 2024-07-12 16:27:40 发布

咔布哩

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量1k

点赞数

分类专栏： JS 学习记录文章标签： javascript

本文链接：https://blog.csdn.net/royya_buli/article/details/127615816

版权

学习记录同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

1、js 正则表达式将 span标签替换 h3标签

接口请求成功之后，获取到借口返回的富文本格式，使用replace进行替换

if (res.code == 200) {
    let detail = res.t;
    var matches = detail.content.match(/<p(?:.*?)>(?:.*?)<\/p>/g),
    len = matches.length,
    i;
    for (i = 0; i < len; i++) {
	    detail.content = detail.content.replace(matches[i], matches[i].replace(/<span class=\"gab-tit\">(.*?)<\/span>/g, '<h3>$1</h3>'));
	}
}

2、结合标签来修改富文本的样式,这里使用的uview组件

（1）HTML页面渲染

<view class="info-item1" id="info-item01">
    <view class="info-title">标题</view> 
	<u-parse :content="detail.content" :tagStyle="contentStyle"></u-parse>
</view>

（2）js部分的自定义样式修改，结合富文本里面存在的标签来控制样式

export default {
    data() {
	    return {
            contentStyle:{
				// 字符串的形式
				ul: 'width:100%;padding:0 !important;margin:0 !important',
				p: 'padding:0 !important;margin:0 !important',
				li: 'list-style:none;',
				span: 'line-height:60rpx;',
				h3:'height:100rpx;line-height:100rpx;'
			},
        }
    }
}