如果我有这样的html:
<li id="listItem">
This is some text
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</li>
我试图使用.text()检索字符串“这是一些文本”，但如果我说$('#list-item').text()，我得到“这是一些textFirst span textSecond span文本”。
是否有一种方法可以获取(并可能通过.text("")之类的方法删除)标签中的自由文本，而不是其子标签中的文本?
HTML不是我写的，所以这是我必须与工作。我知道这将是简单的，只是包装标签的文本时编写的html，但再次，html是预先编写的。
当前回答
我喜欢这个基于clone()方法的可重用实现，它只获取父元素中的文本。
为方便参考而提供的代码:
$("#foo")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
其他回答
使用简单的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;
}
}
}
}
类似于公认的答案，但没有克隆:
$("#foo").contents().not($("#foo").children()).text();
下面是一个jQuery插件用于此目的:
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};
下面是如何使用这个插件:
$("#foo").immediateText(); // get the text without children
对我来说，这似乎是一个过度使用jquery的例子。下面将抓取文本，忽略其他节点:
document.getElementById("listItem").childNodes[0];
你需要修剪它，但它能让你在一个简单的线条中得到你想要的。
EDIT
上面将获得文本节点。要得到实际的文本，使用这个:
document.getElementById("listItem").childNodes[0].nodeValue;
如果文本节点的位置索引在其兄弟节点中是固定的，则可以使用
$('parentselector').contents().eq(index).text()
代码不是:
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
