HTMLタグを削除したい | 正規表現 | JavaScript 目的別リファレンス

スポンサーリンク

このプログラムでは、JavaScriptの正規表現を使用して、文字列からHTMLタグを削除します。

スポンサーリンク

HTMLタグ削除プログラム

以下のコードでは、HTMLタグを含む文字列"<p>これは<strong>テスト</strong>のHTMLです。</p>"からHTMLタグを削除しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLタグを削除する方法</title>
    <script>
        window.onload = function() {
            // HTMLタグを削除する関数
            function removeHTMLTags(str) {
                const pattern = /<\/?[^>]+(>|$)/g;  // HTMLタグを表す正規表現
                return str.replace(pattern, '');  // 正規表現を使ってHTMLタグを削除
            }

            // テスト用の文字列(HTMLを含む)
            const htmlString = "<p>これは<strong>テスト</strong>のHTMLです。</p>";

            // HTMLタグを削除
            const result = removeHTMLTags(htmlString);

            // 結果をHTMLに表示
            document.getElementById('result').textContent = `元の文字列: 「${htmlString}」 -> HTMLタグ削除後: 「${result}」`;
        }
    </script>
</head>
<body>

    <h1>HTMLタグを削除する方法</h1>

    <div id="result"></div>

</body>
</html>

プログラムの解説

このプログラムでは、正規表現を使用して文字列からHTMLタグを削除しています。/<\/?[^>]+(>|$)/gという正規表現は、HTMLタグを検出するために使われます。
<\/?はタグの開始または終了部分、[^>]+はタグの中身、(>|$)はタグの終わりまたは文字列の終わりを示します。

以下はreplace()メソッドおよび正規表現に関する注意点です。

  • replace()メソッドは、指定したパターンに一致する部分を置換します。今回は空文字で置換しています。
  • この正規表現はシンプルなタグ除去には効果的ですが、複雑なHTML構造や自己閉じタグには対応しきれない場合があります。
  • HTMLの構造が崩れている場合、意図した結果が得られない可能性があるため、注意が必要です。

RegExpオブジェクト メソッドの機能一覧

RegExpオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのRegExpオブジェクトは、正規表現を使用して文字列のパターンを検出、操作するためのオブジェクトです。以下に、RegExpオブジェクトのメソッドをインスタンスメソッドと静的メソッドに分け、アルファベット順にまとめています。RegExpオブジェクトのインスタンスメソッド メソッド名 説明と注意点 R...