文字列操作

【JavaScript】文字列からhtmlタグを取り除く方法

更新日：2023/04/04

JavaScriptには文字列からhtmlのタグを削除する関数が用意されていません。
そのため自作する必要があります。

そこで今回は、文字列からhtmlタグを取り除く関数を作成してみました。

 

単純バージョン

単純に考えると、"<"で始まって">"で終わる文字列を正規表現で探して、空文字("")に置換します。
正規表現は、次のようになります。

/<([^>]+)>/g

これを文字列置換のreplace()で使用すると、次のようなコードになります。

const stripTags = text =>text.replace(/<([^>]+)>/g,'');

この関数を使用してみます。

const t = `<div>
<p>abc</p>
<p class="c">def</p>
</div>`;

console.log( t ); // そのまま確認
// 結果
// <div>
// <p>abc</p>
// <p class="c">def</p>
// </div>

console.log( stripTags(t) ); // タグ除去
// 結果
// abc
// def

除去できていますね。

 

少し複雑バージョン

前項の単純バージョンは、属性値に">"が含まれると上手く動作しません。

上手くいかない例


<p class="a>">abc</p>
  ↓タグ削除
">abc

タグの属性内に"<"または">"が含まれるのは許容されないと思っていたのですが、ブラウザは属性値にこれらの文字が入っていても、問題なくパースしてくれます。

ただしあまり推奨されないので、使わない方がいいです。

そこで、属性値は"<"と">"を許容する正規表現を考えると、次のようになります。

/<([^'">]|"[^"]*"|'[^']*')*>/g

許容と言うより、""と''の中身は何でもありです。

これを使用したコードは、次のようになります。

const stripTags = text => text.replace(/<([^'">]|"[^"]*"|'[^']*')*>/g,'');

作成した関数を使用してみます。

const t = `<div id="<a>">
<p class="b>" id="c>">abc</p>
<p class="d> e>">def</p>
</div>`;

console.log( stripTags(t) );
// 結果
// abc
// def

上手く削除できていますね。

 

正規表現を使用しない方法（ブラウザのみ）

ブラウザ上のJavaScript限定ですが、正規表現を使用しないでhtmlタグを取り除く方法を紹介します。

方法は単純です。
DOM要素を作成してinnerHTMLに文字列をセットします。
すると、内部で文字列を解析してくれます。

そして、innerTextを取り出します。
innerTextは内部の文字列だけ返してくれます。

次のようなコードになります。

const stripTags = text =>{
    const e = document.createElement("div");
    e.innerHTML = text;
    return e.innerText;
};

細かいことを考えずにブラウザに丸投げするのも、いいかもしれませんね。

更新日：2023/04/04

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。