如果我有这样的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是预先编写的。
当前回答
jQuery.fn.ownText = function () {
return $(this).contents().filter(function () {
return this.nodeType === Node.TEXT_NODE;
}).text();
};
其他回答
就像问题一样，我试图提取文本，以便对文本进行一些正则表达式替换，但在我的内部元素(即:< I >， <div>， <span>等)也被删除的地方出现问题。
下面的代码似乎工作得很好，解决了我的所有问题。
它使用这里提供的一些答案，但特别地，只会在元素为nodeType === 3时替换文本。
$(el).contents().each(function() {
console.log(" > Content: %s [%s]", this, (this.nodeType === 3));
if (this.nodeType === 3) {
var text = this.textContent;
console.log(" > Old : '%s'", text);
regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
text = text.replace(regex, value);
regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
text = text.replace(regex, actual);
console.log(" > New : '%s'", text);
this.textContent = text;
}
});
上面所做的是遍历给定el的所有元素(它是通过$("div.my-class[name='some-name']"获得的);对于每个内部元素，它基本上都会忽略它们。对于文本的每个部分(由if (this。nodeType === 3)，它将只对这些元素应用regex替换。
这。textContent = text部分只是替换替换的文本，在我的情况下，我正在寻找像[[min.val]]， [[max.]]这样的标记。val]]等。
这段简短的代码摘录将帮助任何人试图做什么问题是问…再多一点。
使用简单的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;
}
}
}
}
我认为这也将是一个很好的解决方案-如果你想获得所有文本节点的内容是选定元素的直接子。
$(selector).contents().filter(function(){ return this.nodeType == 3; }).text();
注意:jQuery文档使用类似的代码来解释内容函数:https://api.jquery.com/contents/
附注:还有一种更难看的方法，但这更深入地展示了事情是如何工作的，并允许在文本节点之间自定义分隔符(也许你想在那里换行)
$(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");
我不是一个jquery专家，但如何，
$('#listItem').children().first().text()
这对我来说是个好方法
var text = $('#listItem').clone().children().remove().end().text();
