{"id":24983712,"url":"https://github.com/posthtml/posthtml-attrs-parser","last_synced_at":"2025-04-11T20:52:33.716Z","repository":{"id":57328794,"uuid":"47768210","full_name":"posthtml/posthtml-attrs-parser","owner":"posthtml","description":"PostHTML helper that provides a better API to work with tag attributes.","archived":false,"fork":false,"pushed_at":"2025-04-01T06:17:52.000Z","size":379,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T20:52:27.046Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posthtml.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-10T14:49:38.000Z","updated_at":"2025-03-11T07:09:24.000Z","dependencies_parsed_at":"2024-01-29T22:04:30.705Z","dependency_job_id":"8e3a72e9-aeef-4053-86ca-2e93e947c5c4","html_url":"https://github.com/posthtml/posthtml-attrs-parser","commit_stats":{"total_commits":76,"total_committers":3,"mean_commits":"25.333333333333332","dds":0.5526315789473684,"last_synced_commit":"26306f565f0d03f2e679923b928a2169c3e6386d"},"previous_names":["maltsev/posthtml-attrs-parser"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-attrs-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-attrs-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-attrs-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-attrs-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-attrs-parser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480515,"owners_count":21110936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T09:20:34.325Z","updated_at":"2025-04-11T20:52:33.687Z","avatar_url":"https://github.com/posthtml.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"150\" height=\"150\" alt=\"PostHTML\" src=\"https://posthtml.github.io/posthtml/logo.svg\"\u003e\n  \u003ch1\u003eposthtml-attrs-parser\u003c/h1\u003e\n  \u003cp\u003ePostHTML plugin for parsing HTML attributes\u003c/p\u003e\n\n  [![Version][npm-version-shield]][npm]\n  [![Build][github-ci-shield]][github-ci]\n  [![License][license-shield]][license]\n  [![Downloads][npm-stats-shield]][npm-stats]\n\u003c/div\u003e\n\n[npm]: https://www.npmjs.com/package/posthtml-attrs-parser\n[npm-version-shield]: https://img.shields.io/npm/v/posthtml-attrs-parser\n[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-attrs-parser\n[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-attrs-parser.svg\n[github-ci]: https://github.com/posthtml/posthtml-attrs-parser/actions/workflows/nodejs.yml\n[github-ci-shield]: https://github.com/posthtml/posthtml-attrs-parser/actions/workflows/nodejs.yml/badge.svg\n[license]: ./license\n[license-shield]: https://img.shields.io/npm/l/posthtml-attrs-parser.svg\n\nA [PostHTML](https://github.com/posthtml/posthtml) helper plugin that provides a better API for working with tag attributes.\n\n## Usage\n```js\nimport posthtml from 'posthtml';\nimport parseAttrs from 'posthtml-attrs-parser';\n\nposthtml()\n  .use(function (tree) {\n    const div = tree[0];\n    const attrs = parseAttrs(div.attrs);\n\n    attrs.style['font-size'] = '15px';\n    attrs.class.push('title-sub');\n\n    // Compose attributes back to PostHTML-compatible format\n    div.attrs = attrs.compose();\n  })\n  .process('\u003cdiv class=\"title\" style=\"font-size: 14px\"\u003eHello!\u003c/div\u003e')\n  .then(function (result) {\n    console.log(result.html);\n  });\n\n// \u003cdiv class=\"title title-sub\" style=\"font-size: 15px\"\u003eHello!\u003c/div\u003e\n```\n\nBoth ESM and CJS exports are provided, you can use the plugin in CJS too:\n\n```js\nconst posthtml = require('posthtml');\nconst parseAttrs = require('posthtml-attrs-parser');\n\n// ...\n```\n\n## Attributes\n\nOnly `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).\n\n### Default attributes\n\n#### `style`\n\n```html\n\u003cdiv style=\"color: red; font-size: 14px; color: blue\"\u003e\u003c/div\u003e\n```\n```js\nconst attrs = parseAttrs(div.attrs);\n\nconsole.log(attrs.style);\n/*\n{\n  // If there are several properties with the same name,\n  // the values are packed in array\n  'color': ['red', 'blue'],\n  'font-size': '14px'\n}\n*/\n```\n\n#### `class`\n\n```html\n\u003cdiv class=\"title title-sub\"\u003e\u003c/div\u003e\n```\n```js\nconst attrs = parseAttrs(div.attrs);\n\nconsole.log(attrs.class);\n// ['title', 'title-sub']\n```\n\n### Custom parsing rule\n\nYou may also define the parsing rule for other attributes.\n\n#### Array-like attribute\n\n```html\n\u003cdiv data-ids=\"1  2 4 5   6\"\u003e\u003c/div\u003e\n```\n```js\nconst attrs = parseAttrs(div.attrs, {\n  rules: {\n  'data-ids': {\n    delimiter: /\\s+/,\n    // Optional parameter for stringifying attribute's values\n    // If not set, glue = delimiter\n    glue: ' '\n  }\n}\n});\n\nconsole.log(attrs['data-ids']);\n// ['1', '2', '4', '5', '6']\n\nconsole.log(attrs.compose()['data-ids']);\n// 1 2 3 4 5 6\n```\n\n#### Object-like attribute\n\n```html\n\u003cdiv data-config=\"TEST=1;ENV=debug;PATH=.\"\u003e\u003c/div\u003e\n```\n```js\nconst attrs = parseAttrs(div.attrs, {\n  rules: {\n    'data-config': {\n      // Delimiter for key-value pairs\n      delimiter: ';',\n      // Delimiter for a key-value\n      keyDelimiter: '=',\n      // Optional parameter for stringifying key-value pairs\n      // If not set, keyGlue = keyDelimiter\n      glue: '; ',\n      // Optional parameter for stringifying a key-value\n      // If not set, glue = delimiter\n      keyGlue: ' = '\n    }\n  }\n});\n\nconsole.log(attrs['data-config']);\n// {TEST: '1', ENV: 'debug', PATH: '.'}\n\nconsole.log(attrs.compose()['data-config']);\n// TEST = 1; ENV = debug; PATH = .\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-attrs-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-attrs-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-attrs-parser/lists"}