如何确定HTML文本是否使用图标字体？
我正在做一些类似于this browser extension的东西，在整个网页中用愚蠢的等价物替换某些短语。我读过replace words in the body text，但每个答案都有一个共同的问题，那就是它们也破坏了图标字体。要理解我的意思，请转到Google Font的Material Icons demo page并编辑带有图标的<span>中的文本内容。我发现this recommendation by the W3C字体图标可以用ARIA的role="img"属性来标识。但这取决于开发人员的正确实现，而这似乎是演示页面所缺乏的。
我想出了下面的一些技巧，它似乎适用于我测试过的页面。我认为存在名称中没有“图标”的图标字体的概率低于开发人员正确设置role属性的概率，但显然这两种方法都非常脆弱，我想知道是否有更健壮的方法。
window.getComputedStyle(node).getPropertyValue('font-family').toUpperCase().includes('ICON')回答 1
Stack Overflow用户
发布于 2021-08-02 09:56:32
这并不是100%正确的，但是我们真心希望在任何图标字体出现时，元素都会有一个class属性，并且在该class属性中的某个地方，字母i、c、o和n会按这个顺序被连续找到。
在这种情况下，对于任何textNode，您都可以运行以下检查：
if ((myTextNode.parentNode.hasAttribute('class') === false) || (myTextNode.parentNode.className.includes('icon') === false)) {
// REPLACE TEXT
}但正如您已经认识到的，这确实需要实现者在包含textNode的元素的className中的某处实际使用单词图标。
https://stackoverflow.com/questions/68616285
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号