今日遇见一个问题,使用代码实现文本内容正常显示,不用使用v-html进行转义文本内容显示
不想使用 v-html 并且希望将内容转义回去,以正常显示使用 JavaScript 的内置函数 DOMParser() 进行 HTML 解析和处理。以下是一个示例实现:
//考生最后一条消息
lastMessageExaminee() {
return (phone) => {
let messageMap = new Map(JSON.parse(Vue.ls.get(this.phaseInfo.id)))
if (messageMap.get(phone) !== undefined) {
// console.log("content:", messageMap.get(phone)[messageMap.get(phone).length - 1])
let lastMessageExamineeContent = messageMap.get(phone)[messageMap.get(phone).length - 1]
if (lastMessageExamineeContent !== undefined) {
// 如果内容包含 <img> 标签,则替换为【图片】的文本
const imgRegex = /<img[^>]+>/g;
lastMessageExamineeContent.content = lastMessageExamineeContent.content.replace(imgRegex, '【图片】')
const parser = new DOMParser();
const decodedContent = parser.parseFromString(lastMessageExamineeContent.content, 'text/html').documentElement.textContent;
return decodedContent;
}
return '';
}
return;
}
},
我们使用了 DOMParser() 创建了一个解析器对象 parser。然后,通过调用 parser.parseFromString()
方法,将包含 HTML 内容的字符串 lastMessageExamineeContent.content 进行解析,并指定解析类型为
‘text/html’。接下来,我们使用 documentElement.textContent 获取解析后的 HTML
文档元素的文本内容,即进行了转义处理的内容。最后,返回转义后的内容 decodedContent,并在需要的地方进行显示。
请注意,由于使用了 DOMParser() 进行解析,任何包含的 HTML 标签都会被视为普通文本显示,而不会进行解析和渲染