# posthtml-rename-id

> PostHTML plugin to rename id attributes and it's references

Latest version **1.0.12** (published 2020-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install posthtml-rename-id
pnpm add posthtml-rename-id
yarn add posthtml-rename-id
bun add posthtml-rename-id
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2020-04-03 |
| First published | 2016-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 174 |
| Author | JetBrains |
| Maintainers | kisenka |
| Keywords | posthtml, posthtml plugin |

## Links

- npm: https://www.npmjs.com/package/posthtml-rename-id
- Repository: https://github.com/JetBrains/svg-mixer
- Homepage: https://github.com/JetBrains/svg-mixer/tree/master/packages/posthtml-rename-id
- Issues: https://github.com/JetBrains/svg-mixer/issues
- npm.io page: https://npm.io/package/posthtml-rename-id

## Dependencies (1)

- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) 1.0.5

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.12 (latest) — 2020-04-03
- 1.0.4-alpha.0 (alpha) — 2018-04-09
- 1.1.0-alpha.10475b37 (canary) — 2018-04-09
- 1.0.11 — 2018-12-05
- 1.0.10 — 2018-10-29
- 1.0.9 — 2018-10-29
- 1.0.8 — 2018-06-18
- 1.0.7 — 2018-05-11
- 1.0.6 — 2018-04-28
- 1.0.5 — 2018-04-21
- 1.0.4 — 2018-04-13
- 1.0.3 — 2017-10-22
- 1.0.2 — 2017-05-16
- 1.0.1 — 2017-04-27
- 1.0.0 — 2016-08-04

## README

# posthtml-rename-id

[PostHTML](https://github.com/posthtml/posthtml) plugin to rename id attributes 
and it's references. Inspired by [grunt-svgstore](https://github.com/FWeinb/grunt-svgstore).

Handle following cases:

- `href="#id"` and `xlink:href="#id"`
- `style` attribute values like `style="fill: url(#id)"`
- `<style>` tag values like `.selector {fill: url(#id)"}`
- any other attribute value like `attr="url(#id)"`

## Demo

Input
```html
<style>
.selector {fill: url(#qwe)}
</style>

<div id="qwe"></div>
<a href="#qwe"></a>
```

Output
```html
<style>
.selector {fill: url(#prefix_qwe)}
</style>

<div id="prefix_qwe"></div>
<a href="#prefix_qwe"></a>
```

## Install

```sh
npm install posthtml-rename-id
```

## Usage

```js
const posthtml = require('posthtml');
const rename = require('posthtml-rename-id');

posthtml()
  .use(rename('prefix_[id]'))
  .process('<div id="qwe"></div> <a href="#qwe"></a>')
  .then(({ html }) => {
    console.log(html); // <div id="prefix_qwe"></div> <a href="#prefix_qwe"></a>
  });
```

## Configuration

### `pattern`

> Type: `string | function`<br>
> Default: `'[id]'`

Renaming pattern. `[id]` placeholder can be used as current id of an element.
If `pattern` provided as a function it will be called with current id as first argument.
Function should return the new id as string (`[id]` can be used as well).

## Examples

Uppercase all ids:
```js
posthtml([
  renameId(id => id.toUpperCase())
]);
```

Rename all ids to `elem_{counter}`:
```js
let c = 0;
posthtml([
  renameId((id) => { c++; return 'elem_' + c; })
]);
```

## LICENSE

[MIT](https://github.com/JetBrains/svg-mixer/blob/master/LICENSE)

---
_Source: https://npm.io/package/posthtml-rename-id · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._