This package provides simple ways to parse any XML-like text.
The XML tree, often also called the DOM (Document Object Model), is the natural
representation of XML. The XMLTree class can have multiple root nodes in the
XMLTree.roots property.
Usually the last root is the one that contains most data. Or you check each root
if it is a tag by using the isXMLTag helper function. Afterwards you can check
the XMLTag.innerXML property for child nodes.
You can also use the XMLTree.query function to extract XML nodes with the help
of selectors as known from CSS. It depends on the selector and use case whether
this is faster than a custom walk through the tree nodes.
The XMLTree uses the XMLScanner, which is available via the
XMLTree.scanner property. There you can adjust the XMLScanner.cdataTags
property or the XMLScanner.scanSize property for special use cases.
const tree = XMLTree.parse(
'<!DOCTYPE html>' +
'<html lang="en"><head><title>My Webpage</title></head>' +
'<body style="background:#9CF"><h1>My Webpage</h1><hr /></body></html>'
);
console.log( JSON.stringify( tree.query('body h1') );
console.log( JSON.stringify( tree.roots, null, ' ' ) );{
"tag": "h1",
"innerXML": [
"My Webpage"
]
}[{
"tag": "!DOCTYPE",
"attributes": {
"html": ""
}
}, {
"tag": "html",
"attributes": {
"lang": "en"
}
"innerXML": [{
"tag": "head",
"innerXML": [{
"tag": "title",
"innerXML": [
"My Webpage"
]
}]
}, {
"tag": "body",
"attributes": {
"style": "background:#9CF"
},
"innerXML": [{
"tag": "h1",
"innerXML": [
"My Webpage"
]
}, {
"tag": "hr",
"empty": true
}]
}]
}]If XML should be read exactly like it is written, the XMLScanner is the class
to use. It keeps every linebreak and every variant of a closing tag. The only
things not preserved by the scanner are the surrounding quote characters for
attribute values.
If you expect text between XML tags or an XML tag itself to be larger than 1 MB,
then you should increase the value of the XMLScanner.scanSize property
accordingly. If you like to save memory during a scan, you can also decrease the
scan size.
const scanner = new XMLScanner(
'<!DOCTYPE html>' +
'<html lang="en"><head><title>My Webpage</title></head>' +
'<body style="background:#9CF"><h1>My Webpage</h1><hr /></body></html>'
);
let node: ( XMLNode | undefined );
while ( node = scanner.scan() ) {
console.log( node );
}{ tag: "!DOCTYPE", attributes: { html: "" } }
{ tag: "html", attributes: { lang: "en" } }
{ tag: "head" }
{ tag: "title" }
"My Webpage"
{ tag: "/title" }
{ tag: "/head" }
{ tag: "body", attributes: { style: "background:#9CF" } }
{ tag: "h1" }
"My Webpage"
{ tag: "/h1" }
{ tag: "hr", empty: true }
{ tag: "/body" }
{ tag: "/html" }XML has 7 different types of nodes.
-
string: Text strings are the regular escaped text between tags. Use theisStringhelper function to test for this node type. -
XMLCdata: Character data is unescaped text, that contains raw data like JavaScript. Use theisXMLCdatahelper function to test for this node type. -
XMLComment: A comment is a special form of tag, that has not impact on the content of the XML. Use theisXMLCommenthelper function to test for this node type. -
XMLTag: Tags are nodes with a name and attributes. Use theisXMLTaghelper function to test for this node type. There exists 4 subtypes of tags.-
Empty Tag: This tag is self-closing and has the
XMLTag.emptyproperty set totrue. Typical empty tags areimg,meta, andpath. -
Regular Tag: This tag often contains child nodes in the
XMLTag.innerXMLproperty. Typical regular tags area,p, andtext. -
Document Type Definition: This tag is similar to a regular tag, but has a name starting with a
!character. A typical definition tag is!DOCTYPE. -
Processing Instruction: This tag is similar to an empty tag, but has a name starting with a
?character. A typical instruction tag is?xml.
-
const printer = new XMLPrinter( [
{ tag: "!DOCTYPE", attributes: { html: "" } },
{ tag: "html", attributes: { lang: "en" } }
]);
console.log( printer.toString() );<!DOCTYPE html=""><html></html>