【徹底解説】JavaScriptでHTMLタグを取り除く：正規表現、DOMParser、ライブラリ活用

JavaScriptでテキストからHTMLタグを取り除く方法

replace() メソッドは、文字列中の特定のパターンを別の文字列に置き換えることができます。この方法では、正規表現を使ってHTMLタグのパターンをマッチさせ、空文字列に置き換えることで、タグを取り除くことができます。

const textWithHtml = '<p>これはサンプルテキストです<strong>太字</strong></p>';
const textWithoutHtml = textWithHtml.replace(/<[^>]+>/g, '');
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

この方法はシンプルで分かりやすいですが、複雑なHTML構造の場合、適切な正規表現を作成するのが難しい場合があります。

DOMParser は、HTML文字列をDOMツリーに変換するオブジェクトです。DOMツリーを操作することで、特定の要素を削除したり、必要なテキスト部分のみを取得することができます。

const parser = new DOMParser();
const doc = parser.parseFromString(textWithHtml, 'text/html');
const textWithoutHtml = doc.body.textContent;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

この方法は、複雑なHTML構造にも対応できますが、DOMParser の処理が重いため、大量のテキスト処理には向かない場合があります。

ライブラリの利用

js-html-parser や he などのライブラリは、HTMLタグの処理に特化した機能を提供しています。これらのライブラリを使用することで、より簡単に、効率的にHTMLタグを取り除くことができます。

import { parse } from 'js-html-parser';

const textWithHtml = '<p>これはサンプルテキストです<strong>太字</strong></p>';
const textWithoutHtml = parse(textWithHtml).text;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

ライブラリの利用は、コード量を減らし、メンテナンス性を向上させることができます。ただし、ライブラリの追加読み込みが必要になるため、パフォーマンスに影響を与える可能性があります。

上記の方法のどれを選択するかは、以下の要素を考慮する必要があります。

• HTML構造の複雑さ
• 処理速度
• コードの簡潔性

これらの要素を考慮し、最適な方法を選択してください。

replace() メソッド

const textWithHtml = '<p>これはサンプルテキストです<strong>太字</strong></p>';
const textWithoutHtml = textWithHtml.replace(/<[^>]+>/g, '');
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

DOMParser

const parser = new DOMParser();
const doc = parser.parseFromString(textWithHtml, 'text/html');
const textWithoutHtml = doc.body.textContent;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

import { parse } from 'js-html-parser';

const textWithHtml = '<p>これはサンプルテキストです<strong>太字</strong></p>';
const textWithoutHtml = parse(textWithHtml).text;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

これらのコードを参考に、目的に合った方法でHTMLタグを取り除いてください。

textContent プロパティは、要素の子孫ノードのテキスト内容のみを取得します。このプロパティを使用することで、HTMLタグを含まずにテキストを取得することができます。

const element = document.querySelector('p');
const textWithoutHtml = element.textContent;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

この方法はシンプルで分かりやすいですが、スクリプトタグ内のテキストも取得してしまうため、注意が必要です。

const element = document.querySelector('p');
const textWithoutHtml = element.innerText;
console.log(textWithoutHtml); // 出力: これはサンプルテキストです
太字

innerHTML プロパティは、要素の子孫ノードのHTMLコードを取得します。このプロパティを取得して、正規表現でHTMLタグを削除することで、純粋な文字列を取得することができます。

const element = document.querySelector('p');
const html = element.innerHTML;
const textWithoutHtml = html.replace(/<[^>]+>/g, '');
console.log(textWithoutHtml); // 出力: これはサンプルテキストです太字

注意事項

• 上記の方法でHTMLタグを取り除くと、スタイルやレイアウトの情報も失われます。
• スクリプトタグ内のテキストは、textContent プロパティや innerText プロパティで取得してしまうため、注意が必要です。