获取没有子元素的元素的内容答案

【问题标题】：Getting the contents of an element WITHOUT its children获取没有子元素的元素的内容
【发布时间】：2018-05-19 12:32:01
【问题描述】：

我倾向于用纯 JS 解决这个问题，但如果 jQuery 版本更简单，那么 jQuery 也可以。实际上情况是这样的

<span id="thisone">
 The info I want
 <span id="notthisone">
  I don't want any of this nonsense
 </span>
</span>

我实际上想得到
The info I want
但不是
The info I want I don't want any of this nonsense
我特别不想
The info I want <span id="notthisone"> I don't want any of this nonsense </span>
不幸的是，这就是我现在得到的......

我该怎么做？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只有js：

试试看： http://jsfiddle.net/g4tRn/

var result = document.getElementById('thisone').firstChild.nodeValue;    

alert(result);

使用 jQuery：

试试看：http://jsfiddle.net/g4tRn/1

var result = $('#thisone').contents().first().text();  

alert(result);

奖励：

如果你想在外部<span> 中获取其他文本节点，你可以这样做：

试试看：http://jsfiddle.net/g4tRn/4

var nodes = document.getElementById('thisone').childNodes;
var result = '';

for(var i = 0; i < nodes.length; i++) {
    if(nodes[i].nodeType == 3) {       // If it is a text node,
        result += nodes[i].nodeValue;  //    add its text to the result
    }
}

alert(result);

【讨论】：

@richardtallent - 你的意思是像混血儿？确实如此。这样代码少一点。 jsfiddle.net/g4tRn/2

【解决方案2】：

如果您只想要第一个孩子，那么这很简单。如果您正在寻找第一个纯文本元素，那么此代码将需要一些修改。

var text = document.getElementById('thisone').firstChild.nodeValue;
alert(text);

【讨论】：

【解决方案3】：

你尝试过这样的事情吗？

var thisone = $("#thisone").clone();
thisone.children().remove();
var mytext = thisone.html();

【讨论】：

.text() 最后，确定吗？

【解决方案4】：

发件人：http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html

 $("#foo")
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text();    //get the text of element

【讨论】：

【解决方案5】：

纯 JavaScript

在这个纯 JavaScript 示例中，我考虑了 多个文本节点的可能性，这些节点可能与其他类型的节点交错。从调用/客户端代码中传入包含NodeList 的值。

function getText (nodeList, target)
{
    var trueTarget = target - 1;
    var length = nodeList.length; // Because you may have many child nodes.

    for (var i = 0; i < length; i++) {
        if ((nodeList[i].nodeType === Node.TEXT_NODE) && (i === trueTarget)) {
            return nodeList.childNodes[i].nodeValue;
        }
    }

    return null;
}

您可以使用此函数创建一个包装函数，该函数使用此函数来累积多个文本值。

【讨论】：