How can I get text from a node so that it returns it with whitespace formatting like "innerText" does, but excludes descendant nodes that are hidden (style display:none)?
问问题
3234 次
2 回答
6
更新:正如 OP 在下面的评论中指出的那样,尽管MDN 明确指出 IE 引入innerText
了排除隐藏内容,但 IE 中的测试表明情况并非如此。总结一下:
- Chrome:
innerText
仅从可见元素返回文本。 - IE:
innerText
返回所有文本,无论元素的可见性如何。 - Firefox:
innerText
未定义(如 W3C 所示,在我的测试中)。
把所有这些加起来,你就有了一个像瘟疫一样可以避免的财产。继续阅读以获取解决方案....
如果您想要跨浏览器兼容性,您将不得不推出自己的功能。这是一个效果很好的:
function getVisibleText( node ) {
if( node.nodeType === Node.TEXT_NODE ) return node.textContent;
var style = getComputedStyle( node );
if( style && style.display === 'none' ) return '';
var text = '';
for( var i=0; i<node.childNodes.length; i++ )
text += getVisibleText( node.childNodes[i] );
return text;
}
如果你想变得非常聪明,你可以在对象上创建一个属性Node
,这样感觉更“自然”。起初我认为这是innerText
在 Firefox 上填充属性的一种聪明方法,但该属性不是作为Node
对象原型上的属性创建的,所以你真的会在那里玩火。但是,您可以创建一个新属性,例如textContentVisible
:
Object.defineProperty( Node.prototype, 'textContentVisible', {
get: function() {
return getVisibleText( this );
},
enumerable: true
});
这是一个演示这些技术的 JsFiddle:http: //jsfiddle.net/8S82d/
于 2013-11-14T19:14:05.983 回答
1
这很有趣,我来这里是因为我正在寻找为什么display:none
在 Chrome 中省略了元素的文本。
所以,这最终是我的解决方案。
基本上,我克隆节点并删除 set 的类/样式display:none
。
如何添加隐藏元素innerText
function getInnerText(selector) {
let d = document.createElement('div')
d.innerHTML = document.querySelector(selector).innerHTML.replaceAll(' class="hidden"', '')
return d.innerText
}
于 2021-02-14T18:08:48.527 回答