渲染方法
<rich-text :nodes=" content(富文本内容) | richTextFilter "></rich-text>
过滤方法 mounted()方法同级 过滤条件基本满足百分之80的需求
filters:{
richTextFilter(html) {
if(!html) {
return
}
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
return match
})
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')
return match
})
newContent = newContent.replace(/<br[^>]*\/>/gi, '')
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"')
newContent = newContent.replace(/\<p/gi, '\<p style=\"padding: 10px 0px;\"')
newContent = newContent.replace(/\<font color=\"/gi, '\<font style=\"color: ')
newContent = newContent.replace(/ /g,'\xa0')
return newContent
}
},