使用.text（）僅檢索未嵌套在子標記中的文本

若是我有這樣的html：

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

我正在嘗試使用.text()僅檢索字符串「 This is some text」，可是若是我要說$('#list-item').text() ，則會獲得「 This is some text」 textSecond span text」。

有沒有一種方法能夠獲取（並可能經過.text("")類的東西刪除）標籤中的自由文本，而不是其子標籤中的文本？

HTML不是我編寫的，所以這是我必須使用的。 我知道寫html時只將文本包裝在標籤中會很簡單，可是html是預先編寫的。

---

#1樓

不是代碼：

var text  =  $('#listItem').clone().children().remove().end().text();

只是爲了jQuery而成爲jQuery嗎？ 當簡單的操做涉及那麼多的連接命令和那麼多的（沒必要要的）處理時，也許是時候編寫jQuery擴展了：

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

致電：

var text = $('#listItem').textNotChild();

這些參數是在遇到不一樣狀況的狀況下，例如

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

文字將具備價值：

some text<break>again more.....second text<break>again more

---

#2樓

簡單答案：

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

---

#3樓

使用額外的條件來檢查innerHTML和innerText是否相同。 僅在這種狀況下，替換文本。

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/

---

#4樓

你能夠試試這個

alert(document.getElementById('listItem').firstChild.data)

---

#5樓

更輕鬆快捷：

$("#listItem").contents().get(0).nodeValue