Estoy analizando artículos que ocasionalmente pueden tener etiquetas de formato duplicadas, lo que resulta en HTML inflado y evita la conversión adecuada, por ejemplo, en Markdown.
Ejemplo:
<p> This is an article <strong>with <a href="#"><b>nested</b></a> <strong>emphasized words</strong></strong> </p>El resultado debería ser, por lo tanto:
<p> This is an article <strong>with <a href="#">nested</a> emphasized words</strong> </p> (por el bien de mi limpieza, trato bold y strong por igual, incluso si son semánticamente diferentes)
Mi intuición fue configurar una matriz con los duplicados.
const duplicates = [ ["strong", "b"], ["em", "i"], ];Y luego encontrar todos los elementos que están en la lista usando
let searchTags: string[] = []; searchTags.concat(...duplicates); // Search for all formatting tags const result: NodeList = doc.querySelectorAll(searchTags); // ... in each result, check for formatting type, and check for children of the same formatting type Sin embargo, esto parece una forma tremendamente ineficiente de atravesar el DOM, y tendría que ejecutar querySelectorAll para actualizar NodeList después de cada iteración para garantizar que no se atraviesen los nodos ya eliminados.
Parece que debería haber una manera más fácil de identificar a los descendientes (incluso si están profundamente anidados y no son nodos secundarios directos) de la misma etiqueta y eliminar la etiqueta, pero no puedo entenderlo.
Gracias :-)
const duplicates = [ ["strong", "strong"], ["strong", "b"], ["em", "i"], ]; for(let i =0; i<duplicates.length; i++){ let sel = [duplicates[i].join` `,duplicates[i].reverse().join` `].join`,`; document.querySelectorAll(sel) .forEach(tag=>tag.replaceWith(document.createTextNode(tag.innerText))); } console.log(document.querySelector('p').outerHTML); <p> This is an article <strong>with <a href="#"><b>nested</b></a> <strong>emphasized words</strong></strong> </p>