世界

Question

我试图让元素文本内容忽略元素的后代，例如，如果你看一下这个HTML：

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

对于元素“P”，右输出应该只是“你好”。

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

谢谢，

Answer 1

考虑这个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/

Answer 2

远远落后于它是一个解释

 $("p").clone()   //clone element
        .children() //get all child elements
        .remove()   //remove all child elements
        .end()  //get back to the parent
        .text();

Answer 3

我得到的答案与其他几个答案一样。但是，让我试着提供一个解释。

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

此行将呈现为

你好

世界

如果您查看此代码，将如下

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

使用<p>标记，如果段落后跟元素，则不一定需要结束</p>标记。 Check this article

现在，您只需使用以下代码

即可选择第一个p标签的内容

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

JS FIDDLE

Answer 4

您可以使用childNodes属性，即：

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

jsFiddle

Answer 5

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

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

#text

修改

正如@VisioN在评论中所说，使用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; }更安全（对于浏览器兼容性）并建议使用。

Answer 6

将您的HTML更改为

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

使用此脚本

alert(document.getElementById("id1").firstChild.nodeValue);

Answer 7

尝试为要对其执行某些操作的元素提供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>

获取特定元素的文本内容

7 个答案:

世界