Vue.js中如何去除HTML标签 仅输出标签内的文本内容

解决方案 #

你遇到的是HTML实体转义后无法正常解析/提取内容的问题，可根据你的实际需求选择以下两种方案：

方案1：仅提取标签内的纯文本内容 #

如果不需要保留任何HTML格式，只需要文本部分，可通过工具函数提取纯文本，模板不需要使用v-html：

1. 先在Vue实例中添加方法：

methods: {
  // 提取HTML字符串中的纯文本，自动处理转义字符
  getPlainText(htmlStr) {
    // 第一步：还原转义的HTML实体
    const decoded = new DOMParser().parseFromString(htmlStr, 'text/html').documentElement.textContent
    // 第二步：移除所有HTML标签，仅保留文本
    const temp = document.createElement('div')
    temp.innerHTML = decoded
    return temp.textContent || temp.innerText || ''
  }
}

2. 修改模板代码：

<b-table-column label="label_name" field="name" sortable>
  {{ getPlainText(props.row.question) }}
</b-table-column>

如果是SSR环境无法使用浏览器API，可改用正则实现：

getPlainText(htmlStr) {
  return htmlStr.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/<[^>]+>/g, '').trim()
}

方案2：正常渲染HTML标签（保留h3等格式） #

如果需要保留HTML标签的格式效果，只需要先将转义的内容还原，再传入v-html即可：

1. 添加转义还原方法：

methods: {
  decodeHtml(htmlStr) {
    const textarea = document.createElement('textarea')
    textarea.innerHTML = htmlStr
    return textarea.value
  }
}

2. 修改模板代码：

<b-table-column 
  label="label_name" 
  field="name" 
  sortable 
  v-html="decodeHtml(props.row.question)"
>
</b-table-column>

注意：使用v-html渲染动态内容时，请确保内容来源可信，避免XSS安全风险。

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