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

Question

我需要<p>从一些呈现的注释文本中删除开始和结束标记.我将内容作为prop传递给组件,我认为在这样做时,它不允许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

我建议你使用过滤器从VueJS中的渲染文本中剥离HTML ,这样你就可以重复使用应用程序周围的过滤器,而不是特定的单一计算.

我编写了以下内容,它利用浏览器的解析(最可靠的方法),因为正则表达式可以被用户愚蠢所阻挠:

Vue.filter('striphtml', function (value) {
  var div = document.createElement("div");
  div.innerHTML = value;
  var 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" />