web-dev-qa-db-ja.com

レンダリングされたテキストからHTMLタグを削除する方法

開始と終了を削除する必要があります<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の方法はありますか？

javascripthtmlvue.jsstrip
7
Zach Tackett

filterを使用して、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 }}
23
Grant

JavaScriptのテキストからHTMLタグを削除する方法の質問 既に回答があります 。

Vueこれを行う方法は、コードを実行してレンダリングされたコンテンツからHTMLタグを削除し、代わりにCommentEditコンポーネントに渡す計算プロパティを作成することです。

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

<CommentEdit v-show="isEditting" :content="strippedContent" />
3
thanksd
  <p> @{{data.description | strippedContent}} </p>


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

私のために働いて

0
manoj patel