javascript - 检查 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。

例如，#el2 的 innerHTML 将是

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

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

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');
    }
}

FIDDLE

或者检查文本节点的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');
        }
    }
}

FIDDLE