PostHTML is a tool for transforming HTML/XML with JavaScript plugins. It allows you to process HTML files using a variety of plugins to perform tasks such as minification, templating, and more.
HTML Transformation
This feature allows you to transform HTML elements. In this example, all <div> tags are transformed into <span> tags.
const posthtml = require('posthtml');
const html = '<div class="foo">Hello World</div>';
posthtml()
.use(tree => {
tree.match({ tag: 'div' }, node => {
node.tag = 'span';
return node;
});
})
.process(html)
.then(result => console.log(result.html));HTML Minification
This feature allows you to minify HTML content. The example demonstrates how to collapse whitespace in the HTML string.
const posthtml = require('posthtml');
const html = '<div class="foo"> Hello World </div>';
const posthtmlMinifier = require('posthtml-minifier');
posthtml([posthtmlMinifier({ collapseWhitespace: true })])
.process(html)
.then(result => console.log(result.html));Templating
This feature allows you to use templating within your HTML. The example shows how to replace a placeholder with a dynamic value.
const posthtml = require('posthtml');
const expressions = require('posthtml-expressions');
const html = '<div>{{ message }}</div>';
posthtml([expressions({ locals: { message: 'Hello World' } })])
.process(html)
.then(result => console.log(result.html));html-minifier is a highly configurable, well-tested, JavaScript-based HTML minifier. It focuses on minifying HTML content, similar to the minification feature in PostHTML, but does not offer the same level of extensibility with plugins.
Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It allows you to manipulate HTML and XML documents with a jQuery-like syntax. While it offers powerful DOM manipulation capabilities, it does not provide the same plugin-based architecture as PostHTML.
jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It allows you to create and manipulate a DOM tree, similar to PostHTML, but is more focused on providing a complete DOM environment rather than a plugin-based transformation system.
PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.
All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.
npm install --save-dev posthtml
Simple example
var posthtml = require('posthtml');
var html = '<myComponent><myTitle>Super Title</myTitle><myText>Awesome Text</myText></myComponent>';
posthtml()
.use(require('posthtml-custom-elements')())
.process(html/*, options */)
.then(function(result) {
console.log(result.html);
// <div class="myComponent"><div class="myTitle">Super Title</div><div class="myText">Awesome Text</div></div>
});
Сomplex example
var posthtml = require('posthtml');
var html = '<html><body><p class="wow">OMG</p></body></html>';
posthtml([
require('posthtml-doctype')('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'),
require('posthtml-to-svg-tags')(),
require('posthtml-extend-attrs')({
attrsTree: {
'.wow' : {
id: 'wow_id',
fill: '#4A83B4',
'fill-rule': 'evenodd',
'font-family': 'Verdana'
}
}
})
])
.process(html/*, options */)
.then(function(result) {
console.log(result.html);
// <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
// <svg xmlns="http://www.w3.org/2000/svg"><text class="wow" id="wow_id" fill="#4A83B4" fill-rule="evenodd" font-family="Verdana">OMG</text></svg>
});
npm install --save-dev gulp-posthtml
gulp.task('html', function() {
var posthtml = require('gulp-posthtml');
return gulp.src('src/**/*.html')
.pipe(posthtml([ require('posthtml-custom-elements')() ]/*, options */))
.pipe(gulp.dest('build/'));
});
input HTML
<a class="animals" href="#">
<span class="animals__cat" style="background: url(cat.png)">Cat</span>
</a>
Tree in PostHTML (PostHTMLTree)
[{
tag: 'a',
attrs: {
class: 'animals',
href: '#'
},
content: [{
tag: 'span',
attrs: {
class: 'animals__cat',
style: 'background: url(cat.png)'
},
content: ['Cat']
}]
}]
This is a simple function with a single argument
module.exports = function pluginName(tree) {
// do something for tree
tree.match({ tag: 'img' }, function(node) {
node = Object.assign(node, { attrs: { class: 'img-wrapped' } }});
return {
tag: 'span',
attrs: { class: 'img-wrapper' },
content: node
}
});
};
var request = request('request');
module.exports = function pluginName(tree, cb) {
var tasks = 0;
tree.match({ tag: 'a' }, function(node) {
// skip local anchors
if (!/^(https?:)?\/\//.test(node.attrs.href)) {
return node;
}
request.head(node.attrs.href, function (err, resp) {
if (err) return done();
if (resp.statusCode >= 400) {
node.attrs.class += ' ' + 'Erroric';
}
if (resp.headers.contentType) {
node.attrs.class += ' content-type_' + resp.headers.contentType;
}
done();
});
tasks += 1;
return node;
});
function done() {
tasks -= 1;
if (!tasks) cb(null, tree);
}
};
import { PostHTML } from 'posthtml';
import request from 'request';
export default tree => {
return new Promise(resolve => {
tree.match({ tag: 'user-info' }, (node) => {
request(`/api/user-info?${node.attrs.dataUserId}`, (err, resp, body) {
if (!err && body) node.content = PostHTML.parse(body);
resolve(tree);
});
});
});
};
Parses HTML string into a PostHTMLTree object.
import { PostHTML } from 'posthtml';
PostHTML.parse('<div></div>'); // [{ tag: 'div' }]
Adds a plugin into the flow.
var posthtml = require('posthtml');
var ph = posthtml()
.use(function(tree) {
return { tag: 'div', content: tree };
});
Applies all plugins to the incoming html object.
Returns (eventually) an Object with modified html and/or tree.
var ph = posthtml()
.process('<div></div>'/*, { options }*/);
singleTagsArray tags for extend default list single tags
Default: []
Options { singleTags: ['rect', 'custom'] }
...
<div>
...
<rect>
<custom>
</div>
closingSingleTagOption to specify version closing single tags.
Accepts values: default, slash, tag.
Default: default
Options { closingSingleTag: 'default' }
<singletag>
Options { closingSingleTag: 'slash' }
<singletag />
Options { closingSingleTag: 'tag' }
<singletag></singletag>
skipParseSkips input html parsing process.
Default: null
posthtml()
.use(function(tree) { tree.tag = 'section'; })
.process({ tag: 'div' }, { skipParse: true })
.then(function (result) {
result.tree; // { tag: 'section' }
result.html; // <section></section>
});
syncTry to run plugins synchronously. Throws if some plugins are async.
Default: null
posthtml()
.use(function(tree) { tree.tag = 'section'; })
.process('<div>foo</div>', { sync: true })
.html; // <section>foo</section>
Walk for all nodes in tree, run callback.
tree.walk(function(node) {
let classes = node.attrs && node.attrs.class.split(' ') || [];
if(classes.includes(className)) {
// do something for node
return node;
}
return node;
});
Find subtree in tree, run callback.
tree.match({ tag: 'custom-tag' }, function(node) {
// do something for node
return Object.assign(node, {
tag: 'div',
attrs: { class: node.tag }
});
});
Support Array matchers
tree.match([{ tag: 'b' }, { tag: 'strong' }], function(node) {
var style = 'font-weight: bold;';
node.tag = 'span';
node.attrs ? (
node.attrs.style ? (
node.attrs.style += style
) : node.attrs.style = style;
) : node.attrs = { style: style };
return node
});
For each found of class run callback
tree.matchClass('class-for-delete', function(node) {
// do something for node
return ''; // delete this node in tree
});
Something more? ;)
0.4.0 (2015-10-03)
retext link for ideas plugin (ab8ba81)FAQs
HTML/XML processor
The npm package posthtml receives a total of 262,001 weekly downloads. As such, posthtml popularity was classified as popular.
We found that posthtml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.