javascript - 子ノードのテキストを取得せずにスパンから独自のテキストを取得する方法は?

Question

次のような動的に形成された HTML があります。

<span>
  10/10/2012
  <div class="calendar">
     lots of text elements here
  </div>
</span>

10/10/2012テキストのみを取得するには?

やってみspan.outerTextたのですが、IEとChromeでは動きますが、Firefoxでは動きません。

Answer 1

これは最善の方法ではありませんが、おそらく innerHTLM を使用してから、コンテンツを解析します..

var tmpText = span.innerHTML;
var text = tmpText.subString(0,tmpText.indexOf('<'));

美しくはありませんが、うまくいくはずです。少なくともこの場合..他の子ノードにネストされたテキストがさらにある場合は、もう少し解析を行う必要があります。

Answer 2

jQuery の場合:

var s = $('span').clone();
s.children().remove();
var text = s.text();

jQuery を使用しない場合:

var text = '';
for (var i=0; i<spanElement.childNodes.length; i++) {
   var n =  spanElement.childNodes[i];
   if (n.nodeType==3) text += n.textContent;
}

デモンストレーション

あなたの質問のコードは単なるサンプルだったと思いますが、念のため、div はスパンで許可されていないことに注意してください (スパン許可されたコンテンツを参照してください)。

Answer 3

これは設計上の問題です。<span>その最初の行を、簡単に選択して操作できる別の非ブロック要素にラップすることの何が問題になっていますか?

このような：

<span>
  <span class="date">10/10/2012</span>
  <div class="calendar">
  ....
</span>

あなたのテキストは次のようになります。

$('.date').text();

Answer 4

jQueryを使用する場合:

var text = $("span").clone().children().remove().end().text();

別の方法：

var text = $("span").contents().filter(function() {
    return this.nodeType === 3;
}).text();