如何从呈现的文本中删除 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 方法可以做到这一点吗？

原文由 Zach Tackett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我建议您使用 过滤器 从 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 发布，翻译遵循 CC BY-SA 4.0 许可协议