JavaScript で HTML 要素からテキスト ノードのコンテンツを抽出する方法

要素のテキスト ノードの取得

JavaScript で HTML 要素を操作する場合、多くの場合、それらの要素内のテキスト コンテンツを取得する必要があります。 。ただし、要素には、テキスト ノード、コメント ノード、要素ノードなど、さまざまなタイプのノードを含めることができます。この記事では、テキスト ノードを取得するためのクロスブラウザ ソリューションについて説明します。

次の HTML について考えてみましょう。

<div class="title">
   I am text node
   <a class="edit">Edit</a>
</div>

私たちの目標は、テキスト ノードを保持しながら、「I am text ノード」コンテンツを取得することです。 「編集」リンク。

これを実現するには、jQuery の content() と filter() を利用できます。 function:

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

このコードは、クラス「title」を持つ要素を選択し、その内容を取得します。次に、フィルター関数をコンテンツに適用し、node.TEXT_NODE のノードタイプを持つノード (つまり、テキスト ノード) のみを選択します。最後に、フィルタリングされた結果からテキスト コンテンツを抽出します。

このアプローチを使用すると、「Edit」タグを削除せずに、目的のテキスト ノード コンテンツを正常に取得できます。

以上がJavaScript で HTML 要素からテキスト ノードのコンテンツを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。