如何从渲染文本中删除 HTML 标签

Question

我需要从一些呈现的评论文本中删除开始和结束<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 方法吗？

Answer 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 }}

Answer 2

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


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

为我工作

Answer 3

如何从 javascript 中的文本中删除 HTML 标签的问题已经有了答案。

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

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

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

Answer 4

我对@mikep 对@Grant 关于 XSS 漏洞的回答的评论感到震惊。 这对我来说将是一个表演终结者。

快速测试证实这是真的：

        {{foo| stripHTML}}
...

  data:function(){return {
    foo: "<p><img src='' onerror=alert('XSS')/>some text</p>",
  }},

这显示了警报，证明 Javascript 已被注入并执行。

我找到了一种技术来解析 HTML 而无需在此答案中将其附加到 DOM，这不易受到图像攻击。

我想出了这个版本的格兰特过滤器，它只是将相同的测试呈现给"some text" ，而不显示任何警报。

Vue.filter('stripHTML', function (value) {
    let text = ''
    const parser = new DOMParser();
    const dom = parser.parseFromString(value, "text/html");
    let div = dom.querySelector('body>*');
    if(div){
        text = div.textContent || div.innerText || ''
    }
    return text
});

请注意，这假设内容中有一个顶级节点，例如<p>some stuff<p> ，但您可以扩展查询选择器以处理其他情况。