如果我有这样的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是预先编写的。
当前回答
我建议使用createTreeWalker来查找所有没有附加到html元素的文本元素(这个函数可以用来扩展jQuery):
function textNodesOnlyUnder(el) { var resultSet = []; var n = null; var treeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) { if (node.parentNode.id == el.id && node.textContent.trim().length != 0) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_SKIP; }, false); while (n = treeWalker.nextNode()) { resultSet.push(n); } return resultSet; } window.onload = function() { var ele = document.getElementById('listItem'); var textNodesOnly = textNodesOnlyUnder(ele); var resultingText = textNodesOnly.map(function(val, index, arr) { return 'Text element N. ' + index + ' --> ' + val.textContent.trim(); }).join('\n'); document.getElementById('txtArea').value = resultingText; } <li id="listItem"> This is some text <span id="firstSpan">First span text</span> <span id="secondSpan">Second span text</span> </li> <textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>
其他回答
只需将它放在<p>或<font>中，然后获取$('#listItem font').text()
我想到的第一件事
<li id="listItem">
<font>This is some text</font>
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</li>
类似于公认的答案，但没有克隆:
$("#foo").contents().not($("#foo").children()).text();
下面是一个jQuery插件用于此目的:
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};
下面是如何使用这个插件:
$("#foo").immediateText(); // get the text without children
我建议使用createTreeWalker来查找所有没有附加到html元素的文本元素(这个函数可以用来扩展jQuery):
function textNodesOnlyUnder(el) { var resultSet = []; var n = null; var treeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) { if (node.parentNode.id == el.id && node.textContent.trim().length != 0) { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_SKIP; }, false); while (n = treeWalker.nextNode()) { resultSet.push(n); } return resultSet; } window.onload = function() { var ele = document.getElementById('listItem'); var textNodesOnly = textNodesOnlyUnder(ele); var resultingText = textNodesOnly.map(function(val, index, arr) { return 'Text element N. ' + index + ' --> ' + val.textContent.trim(); }).join('\n'); document.getElementById('txtArea').value = resultingText; } <li id="listItem"> This is some text <span id="firstSpan">First span text</span> <span id="secondSpan">Second span text</span> </li> <textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>
我不会为此而使用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"> 李< / >
简单的回答是:
$("#listItem").contents().filter(function(){
return this.nodeType == 3;
})[0].nodeValue = "The text you want to replace with"
