Introduction to Parse5

Parse5 is a powerful and versatile HTML parsing library for JavaScript. It provides a variety of APIs for parsing, serializing, and manipulating HTML documents effectively. In this blog post, we will explore dozens of useful APIs and provide code snippets to help you get started.

Installing Parse5

npm install parse5

Parsing HTML

const parse5 = require('parse5');
const html = 'Example';
const document = parse5.parse(html);
console.log(document);

Parsing Fragments

const fragment = parse5.parseFragment('
Example
');
console.log(fragment);

Serializing Document

const serialize = parse5.serialize(document);
console.log(serialize);

Tree Adapter API

const treeAdapter = parse5.treeAdapters.default;

Creating a Document

const newDoc = treeAdapter.createDocument();
console.log(newDoc);

Adding Nodes

const newNode = treeAdapter.createElement('div', 'http://www.w3.org/1999/xhtml', []);
treeAdapter.appendChild(newDoc, newNode);
console.log(newDoc);

Manipulating Nodes

const body = newDoc.childNodes.find(node => node.nodeName === 'body');
const textNode = treeAdapter.createTextNode('Hello, World!');
treeAdapter.appendChild(body, textNode);
console.log(newDoc);

Application Example

Let’s build a simple application that uses Parse5 to read an HTML file, manipulate its content, and save the modified HTML:

const parse5 = require('parse5');
const fs = require('fs');

function modifyHtml(filePath) {
  const html = fs.readFileSync(filePath, 'utf-8');
  const document = parse5.parse(html);
  const body = document.childNodes[1].childNodes[1]; // assuming standard HTML structure
  const newDiv = parse5.treeAdapters.default.createElement('div', 'http://www.w3.org/1999/xhtml', []);
  const newText = parse5.treeAdapters.default.createTextNode('Inserted content');
  parse5.treeAdapters.default.appendChild(newDiv, newText);
  parse5.treeAdapters.default.appendChild(body, newDiv);
  
  const modifiedHtml = parse5.serialize(document);
  fs.writeFileSync(filePath.replace('.html', '.modified.html'), modifiedHtml);
  console.log('HTML modified successfully.');
}

modifyHtml('example.html');

In this example, we read an HTML file, parse it to a document, create and append a new <div> element with some text to the body, and then serialize and save the modified HTML.

Parse5 is a powerful tool for anyone working with HTML in JavaScript, offering a wide range of functionalities for parsing, manipulating, and serializing HTML documents. Try it out in your projects and make your HTML manipulations easier and more efficient!

Hash: 28225641a49f4a14562a1010d966beec55b1cf6fd90ccc5108d0733034489a7b