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.
rehype
rehype is an HTML processor powered by plugins part of the
unified collective.
Don’t need the parser?
Or the compiler?
That’s OK.
Announcing the unified collective! 🎉
Read more about it on Medium »
Installation
npm:
npm install rehype
Usage
var rehype = require('rehype')
var report = require('vfile-reporter')
rehype().process('<title>Hi</title><h2>Hello world!', function(err, file) {
console.log(report(err || file))
console.log(String(file))
})
Yields:
no issues found
<html><head><title>Hi</title></head><body><h2>Hello world!</h2></body></html>
Configuration for rehype-parse and
rehype-stringify can be set with
.data('settings', {/*...*/})
.
License
MIT © Titus Wormer