Question

我想知道元素是否直接包含任何文本。直接我的意思是：不是通过它的孩子。

<div id="case1"></div>
<div id="case2">text-in-div</div>
<div id="case3">
    <p>text-in-p</p>
</div>
<div id="case4">
    text-in-div
    <p>text-in-p</p>
</div>
<div id="case5">
    <p>text-in-p</p>
    text-in-div
</div>
<div id="case6">
    <p>text-in-p</p>
    text-in-div
    <p>text-in-p</p>
</div>

<script>
    function containsTextDirectly(id) {
        var element = document.getElementById(id);
        //what comes here?
    }

    console.log(containsTextDirectly("case1")); //false
    console.log(containsTextDirectly("case2")); //true
    console.log(containsTextDirectly("case3")); //false
    console.log(containsTextDirectly("case4")); //true
    console.log(containsTextDirectly("case5")); //true
    console.log(containsTextDirectly("case6")); //true

</script>

显然我可以通过编程方式检查它（删除子节点并查看元素是否变空..）但我正在寻找更优化（优雅）的解决方案。

Answer 1

直接在元素下检查文本节点：

return Array.prototype.some.call(element.childNodes, function(child) {
    return child.nodeType === Node.TEXT_NODE;
})

如果你想确保文本节点是非空的（在你的case3中给出“正确”的答案），那么

    return child.nodeType === Node.TEXT_NODE && /\S/.test(child.nodeValue);

其中/\S/.test测试是否存在至少一个非空格字符。

Answer 2

如果您只想要“任何字符串”并想要忽略所有子元素？好吧，这是一个使用jQuery的简单解决方案。

<script>
    $("#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
</script>

我们克隆你想要文本的元素，然后从这个克隆元素中删除所有子元素，然后返回元素的文本。

javascript - 检查元素是否直接包含任何文本

2 个答案: