仅获取 html 元素和子元素中的可见文本答案

【问题标题】：Get only visible text within an html element and child elements仅获取 html 元素和子元素中的可见文本
【发布时间】：2017-04-29 00:30:59
【问题描述】：

我有以下html：

<td>
  <strong>CLERK SHALL ISSUE THE CERTIFICATE OF TITLE</strong>
  <!-- DUE DATE & COMPLETED DATE -->
  <div class="SmallNotes" hidden="hidden">
    <i>Due Date:&nbsp;</i><br>
    <i>Complete Date:&nbsp;</i><br>
  </div>
  <!-- PARTY NAME -->
  <div class="SmallNotes" hidden="hidden">
    <i></i><br>
  </div>
</td>

我只想获取浏览器中可见的文本，在本例中为：

CLERK SHALL ISSUE THE CERTIFICATE OF TITLE

现在有时 div 没有隐藏属性，因此会在屏幕上可见。

我的直接解决方案是 innerText：

cells[6].innerText
> "CLERK SHALL ISSUE THE CERTIFICATE OF TITLE"

但是，我在一个 casperjs 脚本中运行它，有时它也会拾取 Due Date: 文本，这应该是隐藏的。因此，在 casperjs 中运行时，innerText 并不可靠。是否有另一种方法可以仅获取可见文本？ jQuery text() 方法生成所有文本，包括隐藏文本。 innerHTML 生成 html 元素。 textContent() 的工作方式与 jQuery 的 text() 相同。另外，请注意，有时文本会直接出现在 td 标记中。

【问题讨论】：

标签： javascript

【解决方案1】：

您将需要遍历所有子节点以检查它们是否具有隐藏属性。下面是使用 JQuery 的解决方案

   var $childNodes = $("td").children();
   console.log($childNodes.filter(':visible').text());

【讨论】：

在我的问题中，我也有这个问题：另外，请注意，有时文本会直接出现在 td 标签中，而不是子标签
即使直接有文本而没有任何包装器html标签，上述解决方案也将起作用。如果你想遍历所有的 childNodes 那么你可以使用 document.getElementById("idname").childNodes 来获取所有的 childNodes

【解决方案2】：

专门针对这种情况；假设所有子元素都是直接（第一级），可以具有“隐藏”属性，是元素的后代，您可以简单地遍历所有子元素并检查“隐藏”属性：

Array.from(cells[6].children).map(el => 
    el.getAttribute('hidden') ? '' : el.innerText
).join('');

同样，如果您想对元素的子元素执行此操作，您可以递归地执行以下操作：

var loop = function(el) {
    var out = [];

    if(el.getAttribute('hidden')) return;

    if(el.children.length > 0) 
    {
        for(var i = 0; i < el.children.length; ++i) out.push(loop(el.children[i]));
    } 
    else 
    {
        out.push(el.innerText);
    }
    return out.join(' ');
};

loop(cells[6]);

【讨论】：

在我的问题中，我也有这个问题：另外，请注意，有时文本会直接出现在 td 标签中，而不是子标签