Vue中如何识别HTML字符串并正确渲染带格式的HTML内容

• 双大括号{{}}的默认渲染逻辑是将内容转义为纯文本输出，不会解析HTML格式，传入非原始值类型时会直接调用对象的toString()方法，你传入DOMParser生成的HTMLDocument实例，输出结果自然就是[object HTMLDocument]。
• DOMParser.parseFromString()返回的是完整的文档对象，不是可直接插入页面的HTML片段，这一步解析完全是多余操作。

直接使用Vue内置的v-html指令渲染HTML内容即可，不需要手动做DOM解析，调整后的实现如下：

1. 模板部分：区分两种内容的渲染分支，HTML内容走v-html渲染，普通文本走默认插值，同时修正循环key的写法避免重复内容导致渲染异常

<template>
  <div v-for="(msg, index) in msgs" :key="index">
    <template v-if="isHtml(msg)">
      <!-- 可信HTML内容直接通过v-html渲染 -->
      <span v-html="msg"></span>
    </template>
    <template v-else>
      <!-- 普通文本走默认插值，自动转义避免XSS风险 -->
      {{ msg }}
    </template>
  </div>
</template>

2. 逻辑部分：删除多余的processAsHtml方法，保留你的isHtml判断逻辑即可，下面是一个通用的HTML字符串判断参考实现：

/**
 * 判断字符串是否包含HTML标签
 */
function isHtml(str) {
  return /<\/?[a-z][\s\S]*>/i.test(str.trim())
}

• 安全风险提示：v-html会将传入的内容作为原生HTML直接插入页面，不要将用户提交的、未经过滤的不可信内容传入v-html，避免引发XSS攻击。如果需要渲染不可信的HTML内容，先使用专门的XSS过滤库清洗标签后再渲染。
• 循环的key不要直接使用数组项msg，如果数组中存在重复字符串会触发Vue的渲染报错，使用索引或者给每条消息配置唯一ID作为key更稳妥。

用你提供的测试数组验证，最终渲染效果完全符合预期：普通文本直接展示，<b>标签内容加粗，<br/>标签正常换行。

内容的提问来源于stack exchange，提问作者kzaiwo