Tengo una aplicación React. También tengo una cadena que representa un div y este div contiene otros elementos, como input , img , div , etc. Me gustaría mostrar esta cadena como HTML usando dangerouslySetInnerHTML (que sé que es muy peligroso). Pero antes de hacerlo, me gustaría eliminar ciertos elementos de la cadena que corresponden a ciertas etiquetas, como img , svg , por nombrar algunas. ¿Cuál es la manera de lograr esto?
BONUS: Cada uno de estos elementos puede tener clase, id y/u otros atributos. Sería bueno eliminar estos atributos también.
Para eliminar ciertas etiquetas, use DOMParser para convertir la cadena en un documento, luego use querySelectorAll para seleccionar todas las etiquetas que no desea y .remove() ellas.
Para eliminar también todos los atributos de todos los elementos, cambie querySelectorAll para seleccionar todos los elementos e itere sobre sus .attributes .
const str = ` <main class="foo"> <input> <img> <div>div</div> <section id="thesection" class="sectionclass"> <img> <span>span</span> </setion> </main> `; const doc = new DOMParser().parseFromString(str, 'text/html'); const tagsToRemove = 'input, img, div'; for (const elm of doc.querySelectorAll('*')) { if (elm.matches(tagsToRemove)) { elm.remove(); } for (const attrib of [...elm.attributes]) { elm.removeAttribute(attrib.name); } } console.log(doc.body.innerHTML);