rehype

What is rehype?

Rehype is a powerful HTML processor built on the unified framework. It allows you to parse, transform, and stringify HTML content. It is highly extensible and can be used for a variety of tasks such as sanitizing HTML, extracting content, and transforming HTML structures.

What are rehype's main functionalities?

Parsing HTML

Rehype can parse HTML strings into a syntax tree, which can then be manipulated or analyzed.

const rehype = require('rehype');
const html = '<h1>Hello, world!</h1>';
rehype().parse(html);

Transforming HTML

Rehype allows you to transform HTML content by manipulating the syntax tree. You can use plugins or custom functions to modify the tree.

const rehype = require('rehype');
const html = '<h1>Hello, world!</h1>';
rehype()
  .use(() => (tree) => {
    // Transform the tree
  })
  .process(html)
  .then((file) => {
    console.log(String(file));
  });

Stringifying HTML

Rehype can convert a syntax tree back into an HTML string, allowing you to output the transformed content.

const rehype = require('rehype');
const tree = { type: 'root', children: [{ type: 'element', tagName: 'h1', properties: {}, children: [{ type: 'text', value: 'Hello, world!' }] }] };
rehype().stringify(tree);

Sanitizing HTML

Rehype can be used to sanitize HTML content, removing potentially dangerous elements and attributes.

const rehype = require('rehype');
const rehypeSanitize = require('rehype-sanitize');
const html = '<script>alert("Hello, world!")</script><p>Safe content</p>';
rehype()
  .use(rehypeSanitize)
  .process(html)
  .then((file) => {
    console.log(String(file));
  });

Other packages similar to rehype

htmlparser2

Htmlparser2 is a fast and forgiving HTML/XML parser. It is similar to rehype in that it can parse HTML into a tree structure, but it is more focused on speed and less on extensibility and transformations.

jsdom

Jsdom is a JavaScript implementation of the DOM and HTML standards. It allows you to manipulate HTML content in a way similar to how you would in a browser. Unlike rehype, jsdom provides a full DOM API, making it more suitable for complex manipulations and simulations of browser environments.

cheerio

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It allows you to parse and manipulate HTML using a jQuery-like syntax. While rehype focuses on transformations and extensibility, cheerio is more about providing a familiar API for DOM manipulation.

README

rehype

The rehype processor is a HTML processor powered by plug-ins.

• Interface by unified;
• hast syntax tree;
• Parses HTML to the tree with rehype-parse;
• Plug-ins transform the tree;
• Compiles the tree to HTML using rehype-stringify.

Don’t need the parser? Or the compiler? That’s OK.

Installation

npm:

npm install rehype

Usage

var rehype = require('rehype');
var report = require('vfile-reporter');

rehype().process('<h2>Hello world!', function (err, file) {
    file.filename = 'example';
    file.extension = 'html';
    console.log(file.toString());
    console.error(report(file));
});

Yields:

<h2>Hello world!</h2>
example.html
     1-1:17  warning  Unclosed element `h2`       require-close-tag

⚠ 1 warning

License

MIT © Titus Wormer