XML-Serializer is a complete JavaScript implementation of the W3C xml serialization specifications. All specifications have been implemented and includes the following specs:
-
[ELEMENT_NODE Serialization]
-
[DOCUMENT_NODE Serialization]
-
[COMMENT_NODE Serialization]
-
[TEXT_NODE Serialization]
-
[DOCUMENT_FRAGMENT_NODE Serialization]
-
[DOCUMENT_TYPE_NODE Serialization]
-
[PROCESSING_INSTRUCTION_NODE Serialization]
This module is available as an npm scoped package and also has a browser build that is located inside the dist folder. It can easily be integrated with JSDOM for mockup testing.
The below command will install xml-serializer from npm into your project assuming you have the npm already installed.
Install as a development dependency:
npm install --save-dev @teclone/xml-serializerFollowing the specification, the XMLSerializer interface is a constructor and has a serializeToString(root) method exposed on the instance. To serialize any xml node, call the serializeToString(root) method on a constructed instance, passing in the xml node as like shown below:
import XMLSerializer from '@teclone/xml-serializer';
const instance = new XMLSerializer();
console.log(instance.serializeToString(someXmlNode));The constructor can take a boolean argument that indicates if whitespace should be preserved in the serialized output. Default value is true;
// do not preserve white space
const instance = new XMLSerializer(false);
const xmlString = instance.serializeToString(document);Using with JSDOM
Currently [at the time of creating this], JSDOM has not implemented the XMLSerializer interface. This can be easily integrated with JSDOM and any other similar mockup environment or for web scrapping and xml feed parsing like below.
//assumes jsdom has been installed.
import XMLSerializer from '@teclone/xml-serializer';
import { JSDOM } from 'jsdom';
const dom = new JSDOM();
XMLSerializer.installTo(dom.window);
global.window = dom.window;
//start running your tests or do something else.The browser build is available inside the build/dist folder when you npm install the package. You can also clone this repo and run the build command locally. It exposes an XMLSerializer construct on the window object.
<script
type="text/javascript"
src="node_modules/@teclone/xml-serializer/build/dist/main.js"
>
<script>
<script type="text/javascript">
const serializer = new XMLSerializer();
// do some serialization stuffs
</script>By default, the serializer preserves white space during the serialization process. This can be turned off if you want a compact output by passing in false to the constructor at the time of creating an instance.
//do not preserve white space
const instance = new XMLSerializer(false);Another improvement is that it removes all duplicate xml prefix definition on as recommended in the specification document unlike what web browsers do. Below is an example of this:
Original XML:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
media="screen, print" type="text/css"?>
<!--notice that two namespaces have been defined on the root element-->
<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
<!--notice that it is declared again here. this is a duplicate-->
<h:table xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
<h:tr>
<h:td>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<!--one is duplicated here-->
<f:table xmlns:f="https://www.w3schools.com/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
<!--html section-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="this is html section" />
<base href="http://localhost" />
</head>
<body>
<p>this is a paragraph text</p>
<hr />
<template>
<p>this is a template</p>
</template>
</body>
</html>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
<svg:style></svg:style>
<title>my title<title>
</svg:svg>
</root>Chrome inbuilt XMLSerializer Output:
Notice that none of the duplicated namespaces is removed.
<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
media="screen, print" type="text/css"?>
<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
<!-- duplicates still remains -->
<h:table xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
<h:tr>
<h:td>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<!--still remains-->
<f:table xmlns:f="https://www.w3schools.com/furniture">
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
<!--html section-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="this is html section" />
<base href="http://localhost" />
</head>
<body>
<p>this is a paragraph text</p>
<hr />
<template>
<p>this is a template</p>
</template>
</body>
</html>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
<svg:style></svg:style>
<title>my title<title>
</svg:svg>
</root>Output of this module:
Notice that all of the duplicated namespaces are removed.
<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
media="screen, print" type="text/css"?>
<!--notice that two namespaces have been defined on the root element-->
<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
<!--duplicates removed-->
<h:table>
<h:tr>
<h:td>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<!--duplicate removed-->
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
<!--html section-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="this is html section" />
<base href="http://localhost" />
</head>
<body>
<p>this is a paragraph text</p>
<hr />
<template>
<p>this is a template</p>
</template>
</body>
</html>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
<svg:style></svg:style>
<title>my title<title>
</svg:svg>
</root>We welcome your own contributions, ranging from code refactoring, documentation improvements, new feature implementations, bugs/issues reporting, etc. We recommend you follow the steps below to actively contribute to this project:
-
Decide on what to help us with.
-
Fork this repo to your machine.
-
Implement your ideas, and once stable,
-
Create a pull request, explaining your improvements/features