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

2021年11月23日火曜日

javascript jQuery

t f B! P L

enter image description here

以下の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() );
//=> 直下さん
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

QooQ