にせねこメモ

はてなダイアリーがUTF-8じゃないので移ってきました。

HTMLのある要素の直下のテキストだけを取り出す

JavaScriptで、HTMLの要素の直下(つまり、子供)のテキストだけをとりだしたかった。
例をあげると、

<div id="test"><b></b>楽しい人生<small>第一回</small></div>

みたいなhtmlがあったとき、<div>の中の直下のテキストだけ取り出し、「楽しい人生」を得たいという欲求があった。

ここで、

div = document.getElementById("test");
console.log(div.textContent);

とすると、「新楽しい人生第一回」が出力される。これは望むものではない。

あるいは .innerHTML でdivの内部のHTMLを得て自分でタグ要素を正規表現などを利用して消去するということも可能だろうが、ブラウザがすでにタグをパースしてあるのだからそこを自前でやりたくない。

コード

というわけで、作ってみた。

div = document.getElementById("test");
var result = "";
for(elem of div.childNodes){
    if(elem.nodeName == "#text"){
        result += elem.nodeValue;
    }
}
console.log(result);

実行すると、「楽しい人生」が出力される。

説明

Node.childNodes はテキストも含めた子要素を返す。
テキストノードはその要素の .nodeName が "#text" となっている。
子要素をループで一つ一つ見ていって、テキストノードと判別されるもののみその文字列を連結している。

他に何かいい方法があるかもしれない。

メモ

Node.childNodes は NodeList を返す。 Array であれば .forEach() や .filter() が使えるのだが、NodeListでは使うことが出来ない。必要であれば Array.from(NodeList) の様にして一度 Array に変換するといいらしい。