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:文本，这应该是隐藏的。因此，在casperjs内部运行时，innerText不可靠。是否有其他方法只能获得可见文本？ jQuery text（）方法生成所有文本，包括隐藏文本。 innerHTML生成html元素。 textContent（）的工作方式与jQuery的text（）相同。另请注意，有时文本将直接显示在td标记内。

Answer 1

您需要遍历所有子节点以检查它们是否具有隐藏属性。以下是使用JQuery

的解决方案

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

Answer 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]);

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

2 个答案: