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-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);
// <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/'));
});
Check project-stub example with Gulp
npm install --save-dev grunt-posthtml
posthtml: {
options: {
use: [
require('posthtml-head-elements')({
headElements: 'test/config/head.json'
}),
require('posthtml-doctype')({
doctype: 'HTML 5'
}),
require('posthtml-include')({
encoding: 'utf-8'
})
]
},
build: {
files: [{
expand: true,
dot: true,
cwd: 'test/html/',
src: ['*.html'],
dest: 'test/tmp/'
}]
}
}
Also it's work with other view engine. Callback in app.engine is called by res.render() to render the template code.
app.engine('jade', function (path, options, callback) {
// PostHTML plugins
var plugins = [
require('posthtml-bem')(),
require('posthtml-textr')({ locale: 'ru'}, [
require('typographic-ellipses'),
require('typographic-single-spaces'),
require('typographic-quotes')
])
];
var html = require('jade').renderFile(path, options);
posthtml(plugins)
.process(html)
.then(function (result) {
if (typeof callback === 'function') {
var res;
try {
res = result.html;
} catch (ex) {
return callback(ex);
}
return callback(null, res);
}
});
})
app.set('view engine', 'jade');
Take a look at the searchable catalog of the PostHTML plugins.
Something more? ;)
<a class="animals" href="#">
<span class="animals__cat" style="background: url(cat.png)">Cat</span>
</a>
[{
tag: 'a',
attrs: {
class: 'animals',
href: '#'
},
content: [
'\n ',
{
tag: 'span',
attrs: {
class: 'animals__cat',
style: 'background: url(cat.png)'
},
content: ['Cat']
},
'\n'
]
}]
This is a simple function with a single argument.
Use posthtml-plugin-boilerplate boilerplate for create new plugin.
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 parser from 'posthtml-parser';
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 = parser(body);
resolve(tree);
});
});
});
};
Arguments: {Function} plugin
Adds a plugin into the flow.
var posthtml = require('posthtml');
var ph = posthtml()
.use(function(tree) {
return { tag: 'div', content: tree };
});
Arguments: {String|PostHTMLTree} html[, {Object} options]
Applies all plugins to the incoming html object.
Returns: {{tree: PostHTMLTree, html: String}}
(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>
Arguments: {function(PostHTMLNode|String): PostHTMLNode|String}
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;
});
Arguments: {Object|String|RegExp}, {function(PostHTMLNode|String): PostHTMLNode|String}
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
});
MIT
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.