如何从呈现的文本中删除 HTML 标签

Posted 2023-05-09

【中文标题】如何从呈现的文本中删除 HTML 标签

【英文标题】：How to remove HTML tags from rendered text

【发布时间】：2017-06-05 14:49:51

【问题描述】：

我需要从一些渲染的评论文本中删除打开和关闭<p> 标记。我将内容作为道具传递给组件，我认为这样做不允许 v-html 指令正常工作。

我需要在没有 html 标签的情况下呈现内容

这是我尝试使用 v-html 正常渲染的地方

 <textarea class="form-control comment-inline-edit" v-html="content" name="comment-inline-edit" cols="45" rows="3"></textarea>

这是我从父组件传递渲染内容的地方

<CommentEdit v-show="isEditting" :content="comment.content.rendered" v-on:cancel="cancelEdit" />

除了使用 v-html 之外，还有 VueJS 的方法吗？

【参考方案1】：

我建议您使用 filter 从 VueJS 中的渲染文本中去除 HTML，这样您就可以在应用程序周围重复使用过滤器，而不是特定的单一计算。

我写了以下内容，它利用了浏览器的解析（最可靠的方法），因为正则表达式可能会因用户的愚蠢而受阻：

Vue.filter('stripHTML', function (value) 
  const div = document.createElement('div')
  div.innerHTML = value
  const text = div.textContent || div.innerText || ''
  return text
);

将其包含在您的 app.js 中后，您可以在任何地方呈现它，如下所示：

 pdf.description | stripHTML 

【讨论】：

谢谢@Grant。这很好，但如果我想保留图像标签，我该怎么做

很好的答案，但请注意其他用户......这对于它所说的 striphtml 完全有用 - 所以它不是 XSS 安全的。它是脆弱的，例如包含<img src='' onerror=alert('XSS')>的输入字符串。

【参考方案2】：

  <p> @data.description | strippedContent </p>


filters: 
    strippedContent: function(string) 
           return string.replace(/<\/?[^>]+>/ig, " "); 
    

为我工作

【参考方案3】：

javascriptalready has an answer中如何去除文本中HTML标签的问题。

Vue 执行此操作的方法是创建一个计算属性，该属性运行代码以从呈现的内容中删除 HTML 标记，并将其传递给您的 CommentEdit 组件：

computed: 
  strippedContent() 
    let regex = /(<([^>]+)>)/ig;
    return this.comment.content.rendered.replace(regex, "");
  

<CommentEdit v-show="isEditting" :content="strippedContent" />

【讨论】：

***.com/questions/1732348/…

@JonathonHibbard 是的，我不知道去除 html 标签的最佳方法。我的示例代码来自谷歌搜索“strip html tags javascript”。我相信提问者可以找到适合他的东西。我在告诉他如何使用 Vue 的一个特性来运行剥离方法并将该数据传递给他的组件。