Estoy haciendo algo similar a esta extensión de navegador que sustituye ciertas frases con equivalentes tontos en una página web. He leído reemplazar palabras en el cuerpo del texto, pero un problema que comparten todas las respuestas es que también rompen las fuentes de los iconos. Para ver lo que quiero decir, vaya a la página de demostración de iconos de materiales de Google Font y edite el contenido del texto dentro de un <span> con un icono. Encontré esta recomendación del W3C de que los íconos de fuente se identifiquen con el atributo ARIA role="img" . Pero esto depende de la implementación adecuada por parte del desarrollador que parece carecer de la página de demostración.
Se me ocurrió la siguiente chapuza que parece funcionar para las páginas en las que lo probé. Pensaría que la probabilidad de que exista una fuente de icono sin "icono" en su nombre es menor que la de los desarrolladores que configuran el atributo de role correctamente, pero claramente ambos enfoques son muy frágiles y me pregunto si hay algo más robusto.
window.getComputedStyle(node).getPropertyValue('font-family').toUpperCase().includes('ICON')Esto no es 100% infalible, pero uno esperaría sinceramente que en cualquier aparición de una fuente de icono, el elemento tenga un atributo de class y en algún lugar de ese atributo de class las letras i , c , o y n se encuentren consecutivamente y en esa orden
En cuyo caso, para cualquier textNode puede ejecutar la siguiente verificación:
if ((myTextNode.parentNode.hasAttribute('class') === false) || (myTextNode.parentNode.className.includes('icon') === false)) { // REPLACE TEXT } Pero como ya ha reconocido, esto requiere que el implementador use la palabra icono en algún lugar del nombre de className del elemento que contiene el textNode de texto.