仅获取html元素和子元素中的可见文本。
仅获取html元素和子元素中的可见文本。
提问于 2017-04-29 08:31:00
我有以下html：
<td>
<strong>CLERK SHALL ISSUE THE CERTIFICATE OF TITLE</strong>
<!-- DUE DATE & COMPLETED DATE -->
<div class="SmallNotes" hidden="hidden">
<i>Due Date: </i><br>
<i>Complete Date: </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标记中。
回答 2
Stack Overflow用户
发布于 2017-04-29 08:57:21
您需要遍历所有子节点，以检查它们是否具有hidden属性。下面是使用JQuery的解决方案
var $childNodes = $("td").children();
console.log($childNodes.filter(':visible').text());Stack Overflow用户
发布于 2017-04-29 08:43:14
特别是对于这个场景；假设所有的子元素都是一个直接的(第一级)，可以有‘隐藏’属性，是元素的后代，你可以简单地循环所有的子元素并检查一个‘隐藏’属性：
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]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43690611
复制相关文章
相似问题
腾讯云开发者
