javascript - 仅获取 html 元素和子元素中的可见文本

Question

我有以下 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: 文本。因此，innerText 在 casperjs 内部运行时并不可靠。还有另一种方法可以只获取可见文本吗？ jQuery text() 方法生成所有文本，包括隐藏文本。 innerHTML 生成 html 元素。 textContent() 的工作方式与 jQuery 的 text() 相同。另请注意，有时文本会直接出现在 td 标记内。

Answer 1

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

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