JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列からHTMLタグを削除する方法【正規表現の使い方を解説】

JavaScriptでは、正規表現を活用することで、文字列に含まれるHTMLタグやXMLタグを簡単に取り除くことができます。<div>や<span>などのHTML要素は、「<」と「>」で囲まれた形で記述されるため、山括弧の中身ごと括弧も含めて空文字（''）に置き換えれば、タグだけを効率的に除去できます。

基本構文

str.replace(/(<([^>]+)>)/ig, '');

この正規表現の各部分は、次のような意味を持っています。

  • i フラグ：大文字・小文字を区別せずにマッチさせます。
  • g フラグ：文字列内のすべての一致箇所を置換対象にします。
  • &lt;([^&gt;]+)&gt;：「<」で始まり「>」で終わる部分、つまりタグ全体にマッチします。

例1：基本的な使い方

<html>
<body>
<script>
   function removeTags(str) {
      if ((str === null) || (str === ''))
         return false;
      else
         str = str.toString();
      return str.replace(/(<([^>]+)>)/ig, '');
   }
   document.write(removeTags('<html> <body> Javascript<body> is not Java'));
</script>
</body>
</html>

実行結果

Javascript is not Java

このように、関数 removeTags() を使うことで、文字列中のすべてのHTMLタグが取り除かれ、テキスト部分だけが残ります。

例2：別の文字列での確認

<html>
<body>
<script>
    function removeTags(str) {
        if ((str === null) || (str === ''))
            return false;
        else
            str = str.toString();
        return str.replace(/(<([^>]+)>)/ig, '');
    }
    document.write(removeTags('<html> Tutorix is <script> the best <body> e-learning platform'));
</script>
</body>
</html>

実行結果

Tutorix is the best e-learning platform

注意点と補足

正規表現によるタグ除去はシンプルで手軽な反面、属性を含む複雑なタグや不正な形式のHTMLに対しては完全に対応できない場合があります。より安全かつ堅牢に処理したい場合は、ブラウザ標準の DOMParser や一時的な要素を利用してテキストノードのみを抽出する方法も検討するとよいでしょう。

  1. JavaScriptの配列を文字列に変換する方法【toString()の使い方を解説】

    JavaScriptで配列の要素をひとつの文字列として扱いたい場面はよくあります。そんなときに便利なのがtoString()メソッドです。このメソッドを使うと、配列の各要素がカンマ（,）で区切られたひとつの文字列に変換されます。以下は、ボタンをクリックすると配列の中身が文字列として画面に表示されるシンプルなサンプルコードです。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-

  2. 【Java】replaceAll()メソッドと正規表現で文字列からHTMLタグを削除する方法

    JavaにおけるStringクラスはfinal修飾子が付いた不変（イミュータブル）なクラスです。これは、一度生成されたStringオブジェクト自体は変更できないことを意味しますが、変数が参照するオブジェクトを別のインスタンスに差し替えることは可能です。 文字列からHTMLタグを取り除くには、StringクラスのreplaceAll()メソッドを使用します。このメソッドに正規表現を指定することで、「<」と「>」で囲まれたタグ部分を空文字列に置き換えられます。処理後の文字列は、プレーンなテキストとして返されます。 replaceAll()メソッドの構文 public String re