[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.

Usage

``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 = .
``