Estoy obteniendo HTML de mi backend (generado por CKEditor) y luego estoy usando DangerouslySetInnerHTML para representar dicho HTML de esta manera:
const parsed = DOMPurify.sanitize(album.description) <div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div> Funciona bien y puedo renderizar mi HTML. Sin embargo, tengo problemas con los medios integrados. El editor de CK devuelve el enlace multimedia en una <oembed /> .
Lo que me gustaría hacer es que cada vez que haya un <oembed /> , los inserte en <ReactPLayer /> .
Entiendo que probablemente podría usar la manipulación DOM de vanilla js y usar algo como getElementsByTagName, pero supongo que no es una buena práctica hacer eso en reaccionar.
Usando la manipulación DOM, el desafío sería reemplazar literalmente todos los atributos que <oembed .... /> , aunque no es imposible.
Si la cadena html entrante no es ENORME (ejecutándose en varios MB), una simple manipulación de expresiones regulares de cadena debería ser suficiente:
Opción 1: si está seguro de que siempre será <oembed ... />, lo siguiente funciona.
const desc = album.description; oembed_2_player = desc.replaceAll(/\<oembed ([^\/]*)\/\>/gi,"<ReactPLayer $1 />"); const parsed = DOMPurify.sanitize(oembed_2_player) <div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>Opción 2: si espera <oembed ....> ... y quiere traducirlo a <ReactPlayer ..same-as-in-oembed..> ..dito... entonces
const desc = album.description; oembed_2_player = desc.replaceAll(/\<(oembed) ([^\>]*)\>([^\<]*)<\/\1\>/gi,"<ReactPLayer $2>$3</ReactPLayer>"); const parsed = DOMPurify.sanitize(oembed_2_player) <div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>Espero que esto ayude 👍