使用.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()检索字符串“这是一些文本”，但如果我说$('#list-item').text()，我得到“这是一些textFirst span textSecond span文本”。

是否有一种方法可以获取(并可能通过.text("")之类的方法删除)标签中的自由文本，而不是其子标签中的文本?

HTML不是我写的，所以这是我必须与工作。我知道这将是简单的，只是包装标签的文本时编写的html，但再次，html是预先编写的。

当前回答

试试这个:

$('#listItem').not($('#listItem').children()).text()

2015-01-05 13:02:49

其他回答

我建议使用createTreeWalker来查找所有没有附加到html元素的文本元素(这个函数可以用来扩展jQuery):

2016-03-17 13:34:16

$($('#listItem').contents()[0]).text()

斯图尔特回答的简短变种。

或者使用get()

$($('#listItem').contents().get(0)).text()

2015-08-31 22:02:50

简单的回答是:

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

2013-02-07 15:53:08

代码不是:

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

2012-08-29 22:47:39

我不会为此而使用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文本 Second span text . 李< / >

有些人会用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文本 Second span text . 李< / >

或者不创建临时数组:

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文本 Second span text . 李< / >

2022-02-18 08:02:22

使用.text()仅检索未嵌套在子标记中的文本

推荐文章

最新文章

标签