https://github.com/posthtml/posthtml-attrs-parser
PostHTML helper that provides a better API to work with tag attributes.
https://github.com/posthtml/posthtml-attrs-parser
Last synced: 10 months ago
JSON representation
PostHTML helper that provides a better API to work with tag attributes.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-attrs-parser
- Owner: posthtml
- License: mit
- Created: 2015-12-10T14:49:38.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-04-01T06:17:52.000Z (11 months ago)
- Last Synced: 2025-04-11T20:52:27.046Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 370 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
posthtml-attrs-parser
PostHTML 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](https://github.com/posthtml/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](#custom-parsing-rule) below).
### Default attributes
#### `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']
```
### Custom parsing rule
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 = .
```