This might have been asked before and answered or the question has been closed before someone could properly answer it. Just in case someone googles for it here is the answer:
https://developer.mozilla.org/en-US/docs/DOM/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument
parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.
parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.
/*
* DOMParser HTML extension
* 2012-09-04
*
* By Eli Grey, http://eligrey.com
* Public domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*! #source https://gist.github.com/1129031 */
/*global document, DOMParser*/
(function(DOMParser) {
"use strict";
var
DOMParser_proto = DOMParser.prototype
, real_parseFromString = DOMParser_proto.parseFromString
;
// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}
DOMParser_proto.parseFromString = function(markup, type) {
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var
doc = document.implementation.createHTMLDocument("")
;
doc.body.innerHTML = markup;
return doc;
} else {
return real_parseFromString.apply(this, arguments);
}
};
}(DOMParser));
https://developer.mozilla.org/en-US/docs/DOM/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// returns a Document, but not a SVGDocument nor a HTMLDocument
parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// returns a SVGDocument, which also is a Document.
parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.
Some browsers do not support text/html so here is the extra code from the MDN site to add support for text/html
/*
* DOMParser HTML extension
* 2012-09-04
*
* By Eli Grey, http://eligrey.com
* Public domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*! #source https://gist.github.com/1129031 */
/*global document, DOMParser*/
(function(DOMParser) {
"use strict";
var
DOMParser_proto = DOMParser.prototype
, real_parseFromString = DOMParser_proto.parseFromString
;
// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}
DOMParser_proto.parseFromString = function(markup, type) {
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var
doc = document.implementation.createHTMLDocument("")
;
doc.body.innerHTML = markup;
return doc;
} else {
return real_parseFromString.apply(this, arguments);
}
};
}(DOMParser));
IE8 and below
Some browsers like IE8 and below do not have DOMParser, you can parse a string to HTML in the following way:
var div=document.createElement("div");
div.innerHTML=HTMLString;
var anchors=div.getElementsByTagName("a");
Related
I'm trying to search for particular nodes in office xml. I'm using wgxpath for it. Here is my code. But every time empty result is returned. Probably wgxpath doesn't work with namespaces (although it accepts nsResolver as parameter)
Word.run(function (ctx) {
var xml = ctx.document.body.getOoxml();
ctx.sync().then(function () {
try {
var parser = new DOMParser();
var doc = parser.parseFromString(xml, "text/xml");
var win = { 'document': doc };
wgxpath.install(win);
var nsResolver = doc.createNSResolver(doc.ownerDocument == null ? doc.documentElement : doc.ownerDocument.documentElement);
var result = doc.evaluate("/pkg:package/pkg:part/pkg:xmlData/w:styles/w:docDefaults/w:pPrDefault/w:pPr/w:spacing", doc, nsResolver, win.XPathResult.ANY_TYPE, null);
var items = [];
try {
var item = result.iterateNext();
while (item) {
items.push(item);
item = result.iterateNext();
}
}
catch (e) {
reject(e);
}
resolve(items);
});
});
I've also tried another example with simple xml:
var parser = new DOMParser();
var test = "<pkg:count xmlns:pkg='http://schemas.microsoft.com/office/2006/xmlPackage'><pkg:a>1</pkg:a></pkg:count>";
var doc = parser.parseFromString(test, "text/xml");
var win = { 'document': doc };
wgxpath.install(win);
var nsResolver = function(prefix) {
var ns = {
'pkg': 'http://schemas.microsoft.com/office/2006/xmlPackage'
};
return ns[prefix] || null;
}
var result = doc.evaluate('/pkg:count/pkg:a', doc, nsResolver, win.XPathResult.ANY_TYPE, null);
Result is the same: with prefixes empty result is returned, but if I remove prefixes, evaluation works.
How can I evaluate xml with namespaces in office add ins? Any other solution? I've tried to use ActiveXObject("Microsoft.XMLDOM"), but get "Can't create object" exception.
The built in XML parsing methods do support namespaces, but not xpath.
E.g. Document.getElementsByTagNameNS
I'm able to parse XML documents in the browser and get error messages using the following code:
// Internet Explorer
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(txt);
var hasError = (xmlDoc.parseError.errorCode != 0);
// Firefox, Opera, Webkit
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");
var hasError = (xmlDoc.getElementsByTagName("parsererror").length > 0);
But I need to be able to parse an HTML document and check for errors.
Is there an HTML parser I can access in the same way as I'm accessing the XML parser?
UPDATE:
It looks like at least in Firefox I can attempt to create an HTML dom and parse the contents. But it doesn't seem to throw any error or return an error message no matter what I throw at it:
var text = "<html><body><label>test</labe></body></html>";
var parser = new DOMParser();
//var func = function (e) { console.log(e); };
//parser.attachEvent("InvalidStateError", func); // no attachEvent, no addEventListener
var htmlDoc = parser.parseFromString(text, "text/html");
var hasError = (htmlDoc.getElementsByTagName("parsererror").length > 0);
console.log("Has error: " + hasError); // also false. no errors ever.
console.log(htmlDoc);
This page, this page and this page helped me understand the DOMParser class more.
here's come the snippet :
html = "<!doctype html>";
html += "<html>";
html += "<head><title>test</title></head>";
html += "<body><p>test</p></body>";
html += "</html>";
parser = new DOMParser();
dom = parser.parseFromString (html, "text/html");
here's come the error when trying to execute these lines :
Error: Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOMParser.parseFromString]
I try to figure out what's going on but the code seems to be right and I searched on the web, i come here with no clues.
have you encounter this failure before ? if yes, where's the bug hiding ?
You should use DomParser function described at JavaScript DOMParser access innerHTML and other properties
I created fiddle for you http://jsfiddle.net/CSAnZ/
/*
* DOMParser HTML extension
* 2012-02-02
*
* By Eli Grey, http://eligrey.com
* Public domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*! #source https://gist.github.com/1129031 */
/*global document, DOMParser*/
(function(DOMParser) {
"use strict";
var DOMParser_proto = DOMParser.prototype
, real_parseFromString = DOMParser_proto.parseFromString;
// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}
DOMParser_proto.parseFromString = function(markup, type) {
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var doc = document.implementation.createHTMLDocument("")
, doc_elt = doc.documentElement
, first_elt;
doc_elt.innerHTML = markup;
first_elt = doc_elt.firstElementChild;
if (doc_elt.childElementCount === 1
&& first_elt.localName.toLowerCase() === "html") {
doc.replaceChild(first_elt, doc_elt);
}
return doc;
} else {
return real_parseFromString.apply(this, arguments);
}
};
}(DOMParser));
Question: How do I syntax-check my XML in modern browsers (anything but IE)?
I've seen a page on W3Schools which includes an XML syntax-checker. I don't know how it works, but I'd like to know how I may achieve the same behavior.
I've already performed many searches on the matter (with no success), and I've tried using the DOM Parser to check if my XML is "well-formed" (also with no success).
var xml = 'Caleb';
var parser = new DOMParser();
var doc = parser.parseFromString(xml, 'text/xml');
I expect the parser to tell me I have an XML syntax error (i.e. an unclosed name tag). However, it always returns an XML DOM object, as if there were no errors at all.
To summarize, I would like to know how I can automatically check the syntax of an XML document using JavaScript.
P.S. Is there any way I can validate an XML document against a DTD (using JS, and not IE)?
Edit: Here is a more concise example, from MDN:
var xmlString = '<a id="a"><b id="b">hey!</b></a>';
var domParser = new DOMParser();
var dom = domParser.parseFromString(xmlString, 'text/xml');
// print the name of the root element or error message
dump(dom.documentElement.nodeName == 'parsererror' ? 'error while parsing' : dom.documentElement.nodeName);
NoBugs answer above did not work with a current chrome for me. I suggest:
var sMyString = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");
dump(oDOM.getElementsByTagName('parsererror').length ?
(new XMLSerializer()).serializeToString(oDOM) : "all good"
);
You can also use the package fast-xml-parser, this package have a validate check for xml files:
import { validate, parse } from 'fast-xml-parser';
if( validate(xmlData) === true) {
var jsonObj = parse(xmlData,options);
}
Just F12 to enter developer mode and check the source there you can then search validateXML and you are to locate a very long complete XML checker for your reference.
I am using react and stuff using the DOMParser to present the error message as:
handleXmlCheck = () => {
const { fileContent } = this.state;
const parser = new window.DOMParser();
const theDom = parser.parseFromString(fileContent, 'application/xml');
if (theDom.getElementsByTagName('parsererror').length > 0) {
showErrorMessage(theDom.getElementsByTagName('parsererror')[0].getElementsByTagName('div')[0].innerHTML);
} else {
showSuccessMessage('Valid Xml');
}
}
Basic xml validator in javscript. This code may not valid for advance xml but basic xml.
function xmlValidator(xml){
// var xml = "<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>";
while(xml.indexOf('<') != -1){
var sub = xml.substring(xml.indexOf('<'), xml.indexOf('>')+1);
var value = xml.substring(xml.indexOf('<')+1, xml.indexOf('>'));
var endTag = '</'+value+'>';
if(xml.indexOf(endTag) != -1){
// console.log('xml is valid');
// break;
}else{
console.log('xml is in invalid');
break;
}
xml = xml.replace(sub, '');
xml = xml.replace(endTag, '');
console.log(xml);
console.log(sub+' '+value+' '+endTag);
}
}
var xml = "<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>";
xmlValidator(xml);
/**
* Check if the input is a valid XML file.
* #param xmlStr The input to be parsed.
* #returns If the input is invalid, this returns an XMLDocument explaining the problem.
* If the input is valid, this return undefined.
*/
export function xmlIsInvalid(xmlStr : string) : HTMLElement | undefined {
const parser = new DOMParser();
const dom = parser.parseFromString(xmlStr, "application/xml");
// https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
// says that parseFromString() will throw an error if the input is invalid.
//
// https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML
// says dom.documentElement.nodeName == "parsererror" will be true of the input
// is invalid.
//
// Neither of those is true when I tested it in Chrome. Nothing is thrown.
// If the input is "" I get:
// dom.documentElement.nodeName returns "html",
// doc.documentElement.firstElementChild.nodeName returns "body" and
// doc.documentElement.firstElementChild.firstElementChild.nodeName = "parsererror".
//
// It seems that the parsererror can move around. It looks like it's trying to
// create as much of the XML tree as it can, then it inserts parsererror whenever
// and wherever it gets stuck. It sometimes generates additional XML after the
// parsererror, so .lastElementChild might not find the problem.
//
// In case of an error the <parsererror> element will be an instance of
// HTMLElement. A valid XML document can include an element with name name
// "parsererror", however it will NOT be an instance of HTMLElement.
//
// getElementsByTagName('parsererror') might be faster than querySelectorAll().
for (const element of Array.from(dom.querySelectorAll("parsererror"))) {
if (element instanceof HTMLElement) {
// Found the error.
return element;
}
}
// No errors found.
return;
}
(Technically that's TypeScript. Remove : string and : HTMLElement | undefined to make it JavaScript.)
I'm using the following parser to parse xml
function parseXML(text) {
var doc;
if(window.DOMParser) {
var parser = new DOMParser();
doc = parser.parseFromString(text, "text/xml");
}
else if(window.ActiveXObject) {
doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
doc.loadXML(text);
}
else {
throw new Error("Cannot parse XML");
}
return doc;
}
I can't understand why it isn't working on my XML document, obtained via AJAX.
Result via AJAX request:
X-Powered-By PHP/5.2.11
Content-Length 887
Keep-Alive timeout=5, max=95
Connection Keep-Alive
Content-Type text/xml
<?xml version="1.0" encoding="UTF-8"?>
<xml_test>wont work!</xml_test>
Test Code:
var xml = parseXML(data);
$(xml).find("xml_test").each(function()
{
console.info('found xml_test... never happen..');
});
But if I use it like this it works nicely!
var data = '<xml_test>works</xml_test>';
var xml = parseXML(data);
$(xml).find("xml_test").each(function()
{
alert('this works!');
});
I know that this is a specific question but I would appreciate your help and/or suggestions...
Thanks in advance
Pedro
If you use jQuery to request your resource, you should already get XML DOM document in case it was served with text/xml mime-type. Thus no need to parse.
If you're getting your XML via Ajax, there's no need to parse it because the browser will do it for you. Simply use the responseXML property of the XMLHttpRequest object, which will give you an XML document object. jQuery wraps this using "xml" for the dataType:
$.ajax({
type: "GET",
url: "foo.xml",
dataType: "xml",
success: function(xml) {
alert(xml.documentElement.nodeName);
}
});
I use this function and gives me good result:
var myLoadXml = function(s){
var objxml = null;
if(document.implementation && document.implementation.createDocument) {
var objDOMParser = new DOMParser();
objxml = objDOMParser.parseFromString(s, "text/xml");
} else if (window.ActiveXObject) {
objxml = new ActiveXObject('MSXML2.DOMDocument.3.0');
objxml.async = false;
objxml.loadXML(s);
}
return objxml;
};
var xml = myLoadXml(data);
$(xml).find("xml_test").each(function()
{
console.info('found xml_test... never happen..');
});
EDIT
Example
** EDIT II **
function parseXML(text) {
var doc;
if (typeof text == 'object'){ // check type of text
return text;
}
if(window.DOMParser) {
var parser = new DOMParser();
doc = parser.parseFromString(text, "text/xml");
}
else if(window.ActiveXObject) {
doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
doc.loadXML(text);
}
else {
throw new Error("Cannot parse XML");
}
return doc;
}
If you are using jQuery (as your test code suggests), you can simply pass the xml to it.
var xml = $(data);