javascript - 检查元素是否直接包含任何文本 [英] javascript - check if element directly contains any text

问题描述

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

 < 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> 
函数containsTextDirectly（id）{
 var element = document.getElementById（id）; 
 //这里有什么？ 
} 
 
 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> 
  

显然，我可以通过编程来检查它（删除子元素并查看元素是否为空）我正在寻找一个更优化的解决方案。

解决方案

检查元素正下方的文本节点：

  return Array.prototype.some.call（element.childNodes，function（child）{
 return child.nodeType === Node。 TEXT_NODE; 
}）
  

如果您想确保文本节点不是空的（在你的case3中给出正确的答案），然后

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

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

I would like to know if an element contains any text directly. By directly I mean: not through its children.

<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>

Obviously I could check it programmatically (remove children and see if the elements becomes empty..) but I am searching for a more optimal (elegant) solution.

解决方案

Check for text nodes directly under the element:

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

If you want to make sure the text nodes are non-empty (to give the "correct" answer in your case3) then

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

where /\S/.test tests for the presence of at least one non-white-space character.

这篇关于javascript - 检查元素是否直接包含任何文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！