A PostHTML helper plugin that provides a better API for working with tag attributes.
import posthtml from 'posthtml';
import parseAttrs from 'posthtml-attrs-parser';
posthtml()
.use(function (tree) {
const div = tree[0];
const attrs = parseAttrs(div.attrs);
attrs.style['font-size'] = '15px';
attrs.class.push('title-sub');
// Compose attributes back to PostHTML-compatible format
div.attrs = attrs.compose();
})
.process('<div class="title" style="font-size: 14px">Hello!</div>')
.then(function (result) {
console.log(result.html);
});
// <div class="title title-sub" style="font-size: 15px">Hello!</div>Both ESM and CJS exports are provided, you can use the plugin in CJS too:
const posthtml = require('posthtml');
const parseAttrs = require('posthtml-attrs-parser');
// ...Only style and class attributes are parsed by default (as object and array, respectively). For other attributes, the parsing rules should be specified (see Custom parsing rule below).
<div style="color: red; font-size: 14px; color: blue"></div>const attrs = parseAttrs(div.attrs);
console.log(attrs.style);
/*
{
// If there are several properties with the same name,
// the values are packed in array
'color': ['red', 'blue'],
'font-size': '14px'
}
*/<div class="title title-sub"></div>const attrs = parseAttrs(div.attrs);
console.log(attrs.class);
// ['title', 'title-sub']You may also define the parsing rule for other attributes.
<div data-ids="1 2 4 5 6"></div>const attrs = parseAttrs(div.attrs, {
rules: {
'data-ids': {
delimiter: /\s+/,
// Optional parameter for stringifying attribute's values
// If not set, glue = delimiter
glue: ' '
}
}
});
console.log(attrs['data-ids']);
// ['1', '2', '4', '5', '6']
console.log(attrs.compose()['data-ids']);
// 1 2 3 4 5 6<div data-config="TEST=1;ENV=debug;PATH=."></div>const attrs = parseAttrs(div.attrs, {
rules: {
'data-config': {
// Delimiter for key-value pairs
delimiter: ';',
// Delimiter for a key-value
keyDelimiter: '=',
// Optional parameter for stringifying key-value pairs
// If not set, keyGlue = keyDelimiter
glue: '; ',
// Optional parameter for stringifying a key-value
// If not set, glue = delimiter
keyGlue: ' = '
}
}
});
console.log(attrs['data-config']);
// {TEST: '1', ENV: 'debug', PATH: '.'}
console.log(attrs.compose()['data-config']);
// TEST = 1; ENV = debug; PATH = .