PostHTML helper that provides a better API to work with tag attributes.
npm install posthtml-attrs-parserPostHTML plugin for parsing HTML attributes
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
[npm]: https://www.npmjs.com/package/posthtml-attrs-parser
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-attrs-parser
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-attrs-parser
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-attrs-parser.svg
[github-ci]: https://github.com/posthtml/posthtml-attrs-parser/actions/workflows/nodejs.yml
[github-ci-shield]: https://github.com/posthtml/posthtml-attrs-parser/actions/workflows/nodejs.yml/badge.svg
[license]: ./license
[license-shield]: https://img.shields.io/npm/l/posthtml-attrs-parser.svg
A PostHTML helper plugin that provides a better API for working with tag attributes.
js
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('
Hello!')
.then(function (result) {
console.log(result.html);
});//
Hello!
`Both ESM and CJS exports are provided, you can use the plugin in CJS too:
`js
const posthtml = require('posthtml');
const parseAttrs = require('posthtml-attrs-parser');// ...
`Attributes
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).$3
####
style`html
`
`js
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'
}
*/
`####
class`html
`
`js
const attrs = parseAttrs(div.attrs);console.log(attrs.class);
// ['title', 'title-sub']
`$3
You may also define the parsing rule for other attributes.
#### Array-like attribute
`html
`
`js
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
`#### Object-like attribute
`html
`
`js
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 = .
``