¿Hay alguna manera de crear un Dom analizable sin ejecutar el código? Voy a explicar el futuro;
Recibo un montón de código creado por el editor CK como HTML, pero quiero analizar elementos de este para crear una vista específica. Por ejemplo, me gustaría captar el primer párrafo como una introducción y la primera imagen como una imagen principal. Además, quiero recuperar todas las imágenes para crear una galería.
Para hacer esto, he creado una función simple pero efectiva:
export const getFromContent = (html, qsa) => { const elm = document.createElement("DIV"); elm.innerHTML = html; let r = elm.querySelectorAll(qsa); return r; }Este trabajo es casi perfecto: el único problema es que agrega todo al DOM (¿uso el término correctamente?), Lo que significa que todos los recursos se cargan incluso si no se muestran en la página.
En mi ejemplo, me gustaría cargar todas las imágenes a través de //res.cloudinary.com/ com comprimir las imágenes antes mostradas, pero dado que todas las imágenes ya están cargadas, esto no será necesario.
¿Hay alguna manera de mantener la buena "versión" de esto con solo JS básico?
PD: Sé que podría reescribir todo "src" a "presrc" con un REGEX, pero realmente me gustaría hacer esto sin cambiar el código y, por lo tanto, crear espacio para errores.
Saludos cordiales ricardo
Este trabajo es casi perfecto, el único problema es que agrega todo al DOM ...
Crea elementos DOM (¡por eso lo estás haciendo!😀), pero no los agrega al documento de la ventana. Ese código no cargará imágenes a las que hace referencia src u hojas de estilo a las que hace referencia href , y no ejecutará código en elementos de script . Esos elementos img / link / script estarán en el div que ha creado, pero ese div no está en el documento. En el caso de las imágenes y las hojas de estilo, se cargarían si coloca el div en el documento (los elementos del script no se ejecutarían incluso entonces), pero no antes.
Dicho esto, es posible que desee considerar el uso de DOMParser en su lugar.
export const getFromContent = (html, qsa) => { const dom = DOMParser.parseFromString(html, "text/html"); let r = dom.querySelectorAll(qsa); return r; } Tenga en cuenta que, de nuevo, cualquier imagen, hoja de estilo o similar a la que hagan referencia los elementos que devuelva (los que coincidan con el selector y se devuelvan en NodeList de querySelectorAll ) se cargarán si esos elementos se agregan al document de una ventana.
Nota: Al aceptar la entrada del usuario y representarla como HTML, a menudo es importante desinfectar esa entrada antes de usarla para eliminar el contenido no deseado. Por ejemplo, mencioné que los elementos del script no se evaluarían, y eso es cierto, pero si el contenido tenía <img src="javascript:doSomethingNefarious()"> y usted agregaba esa imagen a un documento (directa o indirectamente ), ese código doSomethingNefarious() sería ejecutado. Del mismo modo, <div onclick="doSomethingNefarious()">x</div> .
Si busca "desinfectante HTML", encontrará muchas bibliotecas diferentes que dicen que lo harán por usted. Sin embargo, el problema es lo suficientemente importante como para que un medio para hacerlo esté en proceso de estandarizarse como la API de sanitización . Los primeros días todavía, pero es un desarrollo muy prometedor. Con la API en su forma actual (muy borrador), podría hacer:
export const getFromContent = (html, qsa) => { const div = document.createElement("div"); div.setHTML(html); // <== `setHTML` is a new method that sanitizes. // Here I'm using the default sanitizer, but you // could create one with your own custom settings // and pass it as the second argument let r = div.querySelectorAll(qsa); return r; }Pero la API todavía está en proceso de cambio.