I am working with the blob API in the latest Chrome and would like to have the following XML DOM added to a new empty object URL:
<root>
<Title>
<H1>A Title</H1>
<H2>A Subtitle</H2>
Some text or other elements<BR/>
</Title>
</root>
This piece of XML is selected by the user with their mouse from a content editable DIV. Then I convert that selection into an XML DOM like so:
var n_parser = new DOMParser; //new parser
var small_xml_string = "<root>" + window.getSelection() + "</root>"; //add a root node
var small_xml_obj = n_parser.parseFromString(small_xml_string.toString().replace(/n/g, ""), "text/xml"); //convert user selection to string then to an XML DOM while removing some expected newlines below the selection
The parser however fails to convert any nodes that would have any HTML tags in them, resulting in the following DOM:
<root>
</Title>
</root>
I’ve tried escaping the the HTML entities but the parser still behaves the same. This was the code I created to try and deal with entities:
var unencoded_title =
small_xml_string.toString().substring(
small_xml_string.toString().indexOf("<Title>") + 7,
small_xml_string.toString().indexOf("</Title>")
);//Find the string between the title tags
var encoded_title_lt = unencoded_title.replace(/</g, "<");//replace the "<" with "<"
var encoded_title = encoded_title_lt.replace(/>/g, ">");//replace the ">" with ">"
xml_dom.getElementsByTagName("Title")[0].childNodes[0].nodeValue = encoded_title //Add the encoded string to the node, replacing what's there
Note that “xml_dom” is a ready DOM that looks like this:
<root>
<Title>Example
</Title>
</root>
The resulting DOM though is exactly the same as if I’d passed the HTML tags in.
Users will be adding HTML tags like
and to the input. How can I process HTML tags in the user input, ready to pass to the blob api?