我不会为此而使用jQuery，尤其是那些对元素进行不必要克隆的解决方案。您所需要的就是一个简单的循环抓取文本节点。在现代JavaScript中(在撰写本文时，“现代”是一个移动的目标!)，并从结果的开头和结尾删除空白:

const { childNodes } = document.getElementById("listItem");
let text = "";
for (const node of childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
        text += node.nodeValue;
    }
}
text = text.trim();

生活例子:

const {childNodes} = document.getElementById("listItem"); Let text = ""; (childNodes的const节点){ 如果节点。nodeType === Node.TEXT_NODE) { text += node.nodeValue; ｝ ｝ console.log(文本); <李id = "列" > 这是一些文本 <span id="firstSpan">第一个span文本</span> <span id="secondSpan">Second span text</span> . <span id="secondSpan"> 李< / >

有些人会用reduce来表示。我不是一个粉丝，我认为一个简单的循环更清楚，但这种用法确实在每次迭代时更新累加器，所以它实际上并没有滥用reduce:

const { childNodes } = document.getElementById("listItem");
const text = [...childNodes].reduce((text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();

const {childNodes} = document.getElementById("listItem"); const text =[…childNodes]。Reduce ((text, node) => 节点。nodeType ===节点。TEXT_NODE吗?文本+节点。nodeValue:文本 ”、“).trim (); console.log(文本); <李id = "列" > 这是一些文本 <span id="firstSpan">第一个span文本</span> <span id="secondSpan">Second span text</span> . <span id="secondSpan"> 李< / >

或者不创建临时数组:

const { childNodes } = document.getElementById("listItem");
const text = Array.prototype.reduce.call(childNodes, (text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();

const {childNodes} = document.getElementById("listItem"); const text = Array.prototype.reduce。call(childNodes， (text, node) => 节点。nodeType ===节点。TEXT_NODE吗?文本+节点。nodeValue:文本 ”、“).trim (); console.log(文本); <李id = "列" > 这是一些文本 <span id="firstSpan">第一个span文本</span> <span id="secondSpan">Second span text</span> . <span id="secondSpan"> 李< / >

使用一个额外的条件来检查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/

使用简单的JavaScript在IE 9+兼容语法在短短几行:

const childNodes = document.querySelector('#listItem').childNodes;

if (childNodes.length > 0) {
    childNodesLoop:
    for (let i = 0; i < childNodes.length; i++) {
        //only target text nodes (nodeType of 3)
        if (childNodes[i].nodeType === 3) {
            //do not target any whitespace in the HTML
            if (childNodes[i].nodeValue.trim().length > 0) {
                childNodes[i].nodeValue = 'Replacement text';
                //optimized to break out of the loop once primary text node found
                break childNodesLoop;
            }
        }
    }
}

简单的回答是:

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

不确定有多灵活或多少情况下，你需要它覆盖，但对于你的例子，如果文本总是出现在第一个HTML标签之前-为什么不只是在第一个标签上分割内部HTML，并采取前者:

$('#listItem').html().split('<span')[0]; 

如果你需要更宽一点

$('#listItem').html().split('<')[0]; 

如果你需要两个标记之间的文本，比如在一件事之后，但在另一件事之前，你可以做一些像(untesting)这样的事情，并使用if语句使它足够灵活，有一个开始或结束标记，或两者都有，同时避免null ref错误:

var startMarker = '';// put any starting marker here
var endMarker = '<';// put the end marker here
var myText = String( $('#listItem').html() );
// if the start marker is found, take the string after it
myText = myText.split(startMarker)[1];        
// if the end marker is found, take the string before it
myText = myText.split(endMarker)[0];
console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...

I generally make utility functions for useful things like this, make them error free, and then rely on them frequently once solid, rather than always rewriting this type of string manipulation and risking null references etc. That way, you can re-use the function in lots of projects and never have to waste time on it again debugging why a string reference has an undefined reference error. Might not be the shortest 1 line code ever, but after you have the utility function, it is one line from then on. Note most of the code is just handling parameters being there or not to avoid errors :)

例如:

/**
* Get the text between two string markers.
**/
function textBetween(__string,__startMark,__endMark){
    var hasText = typeof __string !== 'undefined' && __string.length > 0;
    if(!hasText) return __string;
    var myText = String( __string );
    var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
    var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
    if( hasStartMarker )  myText = myText.split(__startMark)[1];
    if( hasEndMarker )    myText = myText.split(__endMark)[0];
    return myText;
}

// now with 1 line from now on, and no jquery needed really, but to use your example:
var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)

代码不是:

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