Preservar etiquetas HTML en los valores de los nodos secundarios XML al utilizar XMLSerializer

16 Jul, 2023 Programación 0

Estoy trabajando con la API de BLOB en la última versión de Chrome y me gustaría agregar el siguiente XML DOM a una nueva URL de objeto vacía:

<root>
  <title>
   <H1>Un título</H1>
   <H2>Un subtítulo</H2>
   Algún texto u otros elementos<BR/>
  </title>
</root>

Esta parte de XML es seleccionada por el usuario con el mouse desde un DIV editable. Luego convierto esa selección en un XML DOM de la siguiente manera:

var n_parser = new DOMParser; //nuevo analizador
var small_xml_string = "<root>" + window.getSelection().toString() + "</root>"; //agregar un nodo raíz
var small_xml_obj = n_parser.parseFromString(small_xml_string.replace(/\n/g, ""), "text/xml"); //convertir la selección del usuario a una cadena de texto y luego a un XML DOM, mientras se eliminan algunas nuevas líneas esperadas debajo de la selección

Sin embargo, el DOMParser no puede convertir nodos XML que tengan etiquetas HTML, lo que resulta en el siguiente DOM:

<root>

</root>

He intentado escapar de las entidades HTML, pero el analizador sigue comportándose de la misma manera. Este fue el código que creé para intentar lidiar con las entidades:

var unencoded_title =
  small_xml_string.toString().substring(
    small_xml_string.toString().indexOf("<title>") + 7,
    small_xml_string.toString().indexOf("</title>")
    );//buscar la cadena entre las etiquetas del título
var encoded_title_lt = unencoded_title.replace(/</g, "<");//reemplazar "<" con "<"
var encoded_title = encoded_title_lt.replace(/>/g, ">");//reemplazar ">" con ">"
xml_dom.getElementsByTagName("Title")[0].childNodes[0].nodeValue = encoded_title //agregar la cadena codificada al nodo, reemplazando lo que hay allí

Ten en cuenta que “xml_dom” es un DOM listo que se ve así:

<root>
    <title>Ejemplo</title>
</root>

Sin embargo, el DOM resultante es exactamente el mismo que si hubiera pasado las etiquetas HTML.
Los usuarios agregarán etiquetas HTML como saltos de línea y texto en superíndice a la entrada. ¿Cómo puedo procesar las etiquetas HTML en la entrada del usuario, listo para pasar a la API de BLOB?

davy.ai

July 16, 2023 at 7:37 am

Para procesar las etiquetas HTML en la entrada del usuario y convertirlas en un XML DOM válido para la API de blob, puedes seguir los siguientes pasos:

En lugar de utilizar DOMParser para convertir la selección del usuario en un XML DOM, puedes crear un nuevo documento HTML e insertar la selección como HTML.

var html_doc = new DOMParser().parseFromString('<html><body></body></html>', 'text/html');
var selection_range = window.getSelection().getRangeAt(0);
var selected_html = selection_range.cloneContents(); // obtener el contenido seleccionado como HTML
var div = document.createElement('div');
div.appendChild(selected_html);
var new_html = div.innerHTML; // obtener el HTML dentro del div
var content = html_doc.createRange().createContextualFragment(new_html); // crear un fragmento de documento a partir del nuevo HTML
html_doc.body.appendChild(content); // agregar el nuevo contenido al documento

Luego, puedes utilizar XMLSerializer para convertir el nuevo documento HTML en una cadena y luego analizarlo como un XML DOM.

var xml_string = new XMLSerializer().serializeToString(html_doc);
var xml_dom_parser = new DOMParser();
var xml_dom = xml_dom_parser.parseFromString(xml_string, 'text/xml');

Finalmente, puedes crear una nueva URL de objeto con el XML DOM utilizando la API de blob.

var blob = new Blob([xml_string], {type: 'application/xml'});
var url = URL.createObjectURL(blob);

Con estos pasos, deberías poder procesar las etiquetas HTML en la entrada del usuario y convertirlas en un XML DOM válido para la API de blob.

Answer

davy.ai

July 16, 2023 at 7:37 am
Para procesar las etiquetas HTML en la entrada del usuario y convertirlas en un XML DOM válido para la API de blob, puedes seguir los siguientes pasos:
1. En lugar de utilizar DOMParser para convertir la selección del usuario en un XML DOM, puedes crear un nuevo documento HTML e insertar la selección como HTML.
```
var html_doc = new DOMParser().parseFromString('<html><body></body></html>', 'text/html');
var selection_range = window.getSelection().getRangeAt(0);
var selected_html = selection_range.cloneContents(); // obtener el contenido seleccionado como HTML
var div = document.createElement('div');
div.appendChild(selected_html);
var new_html = div.innerHTML; // obtener el HTML dentro del div
var content = html_doc.createRange().createContextualFragment(new_html); // crear un fragmento de documento a partir del nuevo HTML
html_doc.body.appendChild(content); // agregar el nuevo contenido al documento
```
1. Luego, puedes utilizar XMLSerializer para convertir el nuevo documento HTML en una cadena y luego analizarlo como un XML DOM.
```
var xml_string = new XMLSerializer().serializeToString(html_doc);
var xml_dom_parser = new DOMParser();
var xml_dom = xml_dom_parser.parseFromString(xml_string, 'text/xml');
```
1. Finalmente, puedes crear una nueva URL de objeto con el XML DOM utilizando la API de blob.
```
var blob = new Blob([xml_string], {type: 'application/xml'});
var url = URL.createObjectURL(blob);
```
Con estos pasos, deberías poder procesar las etiquetas HTML en la entrada del usuario y convertirlas en un XML DOM válido para la API de blob.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Preservar etiquetas HTML en los valores de los nodos secundarios XML al utilizar XMLSerializer

Answer

davy.ai