2

我正在尝试仅忽略元素的后代来获取元素文本内容，例如，如果您查看此 HTML：

<p>hello <h1> World </H1> </p>

对于元素“P”，正确的输出应该是“hello”。

我检查了函数：“element.textContent”，但这会返回节点及其后代的文本内容（在我的示例中，它将返回“hello world”）。

谢谢，

4

7 回答 7

3

考虑到这个 HTML：

<div id="gettext">hello <p> not this </p> world?</div>

你想提取“你好”和“世界”吗？如果是，那么：

var div = document.getElementById('gettext'), // get a reference to the element
    children = [].slice.call(div.childNodes), // get all the child nodes
                                              // and convert them to a real array  
    text = children.filter(function(node){
        return node.nodeType === 3;           // filter-out non-text nodes
    })
    .map(function( t ){ 
        return t.nodeValue;                   // convert nodes to strings 
    });    

console.log( text.join('') );                 // text is an array of strings.

http://jsfiddle.net/U7dcw/

于 2013-09-20T10:14:07.893 回答
1

背后有一个解释 

 $("p").clone()   //clone element
        .children() //get all child elements
        .remove()   //remove all child elements
        .end()  //get back to the parent
        .text();
于 2013-09-20T10:04:40.767 回答
1

我的答案与其他几个答案中提供的答案相同。但是，让我尝试提供一个解释。

<p >hello<h1>World</h1> </p>

此行将呈现为

你好

世界

如果您查看此代码，它将如下所示

<p>hello</p>
<h1>World</h1> 
<p></p>

如果段落后跟一个元素，则 使用<p>标签您不一定需要结束标签。检查这篇文章</p>

现在您只需使用以下代码即可选择第一个 p 标签的内容

var p = document.getElementsByTagName('p');
console.log(p[0].textContent);

JS小提琴

于 2013-09-20T10:19:31.253 回答
0

您可以使用该childNodes属性，即：

var p = document.querySelector('p');
p.childNodes[0]; // => hello

jsFiddle

于 2013-09-20T10:04:26.757 回答
0

纯文本被视为名为 的节点#text。您可以使用childNodes元素的属性p并检查其中nodeName每个项目的属性。您可以遍历它们并仅选择#text节点。

下面的函数循环遍历文档中的所有元素并仅打印#text项目

function myFunction()
{
    var txt="";
    var c=document.body.childNodes;
    for (i=0; i<c.length; i++)
    {
        if(c[i].nodeName == "#text")
            txt=txt + c[i].nodeName + "<br>";
    };
    return txt;
}

编辑：

正如@VisioN 在评论中所说，使用nodeType更安全（为了浏览器兼容性）并推荐使用。

于 2013-09-20T10:06:43.920 回答
0

将您的 html 更改为

<p id="id1">hello <h1> World </h1> </p>

使用这个脚本，

alert(document.getElementById("id1").firstChild.nodeValue);
于 2013-09-20T10:08:11.110 回答
0

尝试为要对其进行一些操作的元素提供 id。

Below is the working example, it show output as "hello" as you expected.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showParagraph()
{
   alert(document.getElementById('test').innerHTML);

}
</script>
</head>

<body>
<p id="test">hello <h1> World </H1> </p>
<input type="button" onclick="showParagraph()" value="show paragraph" />
</body>

</html>
于 2013-09-20T10:10:29.930 回答