JQuery 直下のテキストノード(TextNode)を取得

以下のHTMLのように、タグとテキストが混在している場合で、
テキストノード (“直下さん” の部分) だけをどうやって取得するかの話です。

<div id="box">
    直下さん
    <p>ぴーちゃん</p>
</div>

普通に $("#box").text() すると、直下さん ぴーちゃんと返り、
子要素のテキストまで取得してしまいます。

スポンサーリンク

対応方法

直下のテキストノードだけを取得する方法として、
↓ のように jQuery 拡張の関数を用意し、
直下のテキストノードの値だけが取得できる関数を定義します。

$.fn.textNodeText = function() {
  var result = "";
  $(this).contents().each(function() {
    if (this.nodeType === 3 && this.data) {
      result += jQuery.trim( $(this).text() );
    }
  });
  return result;
};

使い方

対象要素に対して、textNodeText() と呼ぶだけです。
以下のコードを実行すれば、最初の例のHTMLであれば、
直下さんが取得できるはずです。

console.log( ```js
$("#box").textNodeText() );
//=> 直下さん