【replace】取得したhtmlの中にあるタグを削除して表示させる

replaceは一部、または全部の書き換えや削除などを行うことができるメソッドです。

今回は取得したhtmlの中にあるタグを削除して表示する方法について紹介していきたいと思います。

取得したhtmlの中にあるタグを削除

html

まずhtmlの中に下記の要素があるとします。

<div class="box">テキストテキスト<br>テキスト<span>テキスト</span><br>テキスト</div>

jQuery

上記のhtmlの中には<br>タグと<span>タグが入っています。

こちらを削除したいと思います。

let tag = jQuery('.box').html();

let tab_set = tag.replace(/<\/?[^>]+>/gi, "");
jQuery('.box').html(tab_set);

解説

htmlを取得して変数に格納する

let tag = jQuery('.box').html();

変数「tag」には下記の内容が格納されます。

テキストテキスト<br>テキスト<span>テキスト</span><br>テキスト

replaceを使ってタグを削除する

let tab_set = tag.replace(/<\/?[^>]+>/gi, "");

replaceメソッドを使うことで特定の文字を削除することができます。

補足

replace に「gi」という文字が記述されています。

それぞれ下記の意味になります。

g一致する文字列全てを置換
i大文字・小文字の一致を調べない場合
gi大文字小文字を区別せずに、一致する文字列全てを置換
正規表現

さきほどの記述のなかで正規表現が使われています。

それぞれの意味を見ていきましょう。

/直前の文字が0個か1個の場合にマッチします
/?直前の文字が 0個か1個 の場合にマッチします
[^…]角括弧に含まれる文字以外
+直前のパターンを 1 回以上繰り返し。

タグを削除したら画面に表示

jQuery('.box').html(tab_set);

タグを削除したものをhtmlに挿入して表示させます。

コメント

タイトルとURLをコピーしました