赞
踩
后台过来的富文本数据大多都是转义字符,所以不能在rich-text中直接使用 无法正常解析,所以需要进行反转义
<rich-text class="xcontent" :nodes="formatRichText(show.content)" v-if="show.content"></rich-text> formatRichText(content) { // 将所有的 "px" 替换为 "rpx" let newrichtext = content.replace(/px/g, 'rpx'); // 处理 <img> 标签的样式 newrichtext = newrichtext.replace(/<img.*?style="(.*?)"/g, (match, styleContent) => { const updatedStyle = styleContent.replace(/px/g, 'rpx'); return `<img style="${updatedStyle}"`; }); // 处理段落 <p> 标签的字体大小 newrichtext = newrichtext.replace(/<p style=".*?font-size: (\d+)px(.*?)"/g, (match, fontSize, rest) => { return `<p style="font-size: ${fontSize}rpx${rest}"`; }); // 处理 HTML 实体字符 newrichtext = newrichtext.replace(/&(lt|gt|nbsp|amp|quot);/g, (match, entity) => { const entities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return entities[entity]; }); return newrichtext; },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。