PostHTML

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