Javascript で HTML をプレーン テキストに変換する方法

JavaScript スクリプト言語でできる便利なことの 1 つは、HTML ドキュメントのドキュメント オブジェクト モデル (または「DOM」) を操作して操作することです。 HTML ドキュメントの DOM は、そのドキュメントのコンテンツを表すための規約です。 Web ブラウザーや JavaScript などのスクリプト言語が、そのドキュメントを構成するさまざまな要素と対話する方法を提供します。 JavaScript と Web ページの DOM を使用すると、HTML をプレーン テキストに簡単に変換できます。

ステップ 1

HTML ドキュメントの HEAD セクションに SCRIPT 宣言を追加します。 SCRIPT タグは、JavaScript などのクライアント側スクリプトを定義します。 SCRIPT タグの「type」属性を「text/javascript」に設定して、SCRIPT 宣言全体が次のようになるようにする必要があります:(JavaScript コードが 2 つのタグの間にある場所)。

ステップ 2

1 つの文字列をパラメーターとして受け取る JavaScript 関数を定義します。この文字列パラメーターには、プレーン テキストに変換する HTML が含まれます。

ステップ 3

「createElement()」メソッドを使用して、JavaScript 関数内に一時的な DIV 要素を作成します。

ステップ 4

関数の文字列パラメーターを一時 DIV の「innerHTML」属性に割り当てます。

ステップ 5

関数で一時文字列変数を作成します。

ステップ 6

「textContent」および「innerText」属性を使用して一時 DIV のプレーン テキスト コンテンツを取得し、それを一時文字列変数に割り当てます。ブラウザー間の互換性の問題により、「textContent」と「innerText」の両方が一部の Web ブラウザーで定義され、他のブラウザーでは未定義になりますが、すべての主要なブラウザーのすべてのバージョンでいずれか一方が定義されます。

ステップ 7

「return」ステートメントを使用して、一時文字列が保持する値を返します。これにより、変換された HTML のプレーン テキスト値が返されます。

ヒント

IF-THEN ステートメントを使用してブラウザー間の互換性をチェックし、関数で「textContent」と「innerText」のどちらを使用するかを決定する代わりに、次のように、一時的な DIV 要素のプレーン テキスト値を一時的な文字列変数に割り当てるだけです。 || tmpDiv.textContent || tmpDiv.innerText.