Henry's Blog

Working with HTML strings

Context

Recently, I was assigned a task that required downloading SVG strings and manipulating them using the third-party library SVG.js. However, the SVG strings came in different formats. Some are simple SVG element strings that start and end with <svg> tags, and some have DTD declaration along with the SVG string like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 99.998 100" enable-background="new 0 0 99.998 100" xml:space="preserve">
	<path d="M99.998,58.823v5.883l-41.176-5.883v23.528l11.766,11.766c0,2.942-2.941,5.883-5.884,5.883 c-11.763,0-29.411,0-29.411,0c-2.941,0-5.883-2.94-5.883-5.883l11.765-11.766V58.823L0,64.705v-5.882l41.176-23.529 c0,0,0-1.96,0-11.765C41.176,17.647,44.117,0,49.999,0s8.823,17.647,8.823,23.529c0,9.805,0,11.765,0,11.765L99.998,58.823z">
	</path>
</svg>

Unfortunately, SVG.js only accepts the <svg> string without the declaration. Using the SVG example above will cause parsing errors.

Convert a DOM string to a DOM document

The first thought that came to my mind was to convert the string to a DOM element, take the SVG part, and convert it back to a string. Nice and simple. But how can I do it with the existing Web APIs?

Luckily, DOMParser and XMLSerializer came to the rescue.

DOMParser allows you to parse an XML or HTML string to a DOM document. Take the SVG above as an example. We can parse the string as follows:

const parser = new DOMParser();
const doc = parser.parseFromString(svgString, 'image/svg+xml');

We can then take the SVG part we want with querySelector!

const svgElement = doc.querySelector('svg');

Convert DOM element to string

After we parse the SVG element, we need to convert the element back to a string. Element.toString() does not work because it's like converting any object to a string. It'll throw an [object SVGSVGElement] string back to you.

We can use XMLSerializer to get the job done:

const serializer = new XMLSerializer();
const svgWithoutDeclaration = serializer.serializeToString(svgElement);

And that's it! We’ve successfully used two web APIs to:

  1. Parse an HTML string and convert it into a DOM document
  2. Convert the DOM document back into a string

References

#dom #js #web_dev