检查 HTML 元素是否包含原始文本？

Question

采取这个 HTML：

<div id="el1">
  <div id="el2">
    <div id="el3">
      Hello
      <div id="el4">
        World
      </div>
    </div>
  </div>
</div>

注意el3和el4包含原始文本；即“你好”和“世界”。其他元素（el1和el2）仅包含其他元素。

然而，使用纯 JavaScript，它们的所有innerHTML属性都表明它们包含某种形式的文本。

如何使用纯 JavaScript 来确定特定元素是否包含原始文本作为子元素。在这种情况下，该方法还将识别el3为包含原始文本（即使此后它还包含另一个元素）。

像这样的东西：

var els = getElementByTagName("*");

for(var i = 0; i < els.length; i++){

  if( /* element contains text */ ){

    // do something

  }
}

这真的只是 RegEx 的工作吗？有了 HTMLElement 的所有属性，您可能会认为会有更好的方法。

没有 jQuery，谢谢。

Answer 1

innerHTML 获取 HTML，并且除了最后一个元素之外的所有元素都包含 HTML，因为它们是嵌套的。

例如，innerHTML#el2为

  <div id="el3">
      Hello
      <div id="el4">
          World
      </div>
  </div>

为了仅获取文本，现代浏览器支持innerText或textContent(firefox)。
然后是空格，所以你可能也应该修剪（）文本，所以像这样

var els = document.querySelectorAll("#wrapper *");

for(var i = 0; i < els.length; i++){
    var el = els[i].cloneNode(true);
    var children = el.children;

    for (var j=children.length; j--;) el.removeChild(children[j]);
    var content = el.innerText ? el.innerText  : el.textContent;

    if( content.trim().length ){
        // do something
        console.log(els[i].getAttribute('id') + ' has text');
    }
}

小提琴

或者检查文本节点的nodeType和nodeValue

var els = document.querySelectorAll("#wrapper *");

for(var i = 0; i < els.length; i++){
    var el = els[i];
    var children = el.childNodes;

    for (var j=children.length; j--;) {
        if( children[j].nodeType === 3 && children[j].nodeValue.trim().length) {
            // do something
            console.log(els[i].getAttribute('id') + ' has text');
        }
    }
}

小提琴