rehype-rewrite
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/rehype-rewrite)
[](https://npmjs.org/package/rehype-rewrite)
[](https://github.com/jaywcjlove/rehype-rewrite/actions/workflows/ci.yml)
[](https://jaywcjlove.github.io/rehype-rewrite/lcov-report/)
[](https://bundlephobia.com/result?p=rehype-rewrite)
[](https://github.com/jaywcjlove/rehype-rewrite/network/dependents)
Rewrite element with [rehype](https://github.com/rehypejs/rehype).
## Installation
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be `import` instead of `require`.
```bash
npm install rehype-rewrite
```
## Usage
> 🚧 Migrate from rehype-rewrite ~~v2.x~~ to `v3.x`.
>
> ```diff
> rehype()
> - .use(rehypeRewrite, (node, index, parent) => {})
> + .use(rehypeRewrite, {
> + rewrite: (node, index, parent) => {}
> + })
> ```
```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
const html = `header
`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
rewrite: (node, index, parent) => {
if(node.type == 'text' && node.value == 'header') {
node.value = ''
}
}
})
.use(stringify)
.processSync(html)
.toString()
```
> ```html
> header
> ```
> **`Output:`**
>
> ```html
>
> ```
>
## Options
```ts
import { Plugin } from 'unified';
import { Root, Element, ElementContent, RootContent } from 'hast';
/** Get the node tree source code string */
export declare const getCodeString: (data?: ElementContent[], code?: string) => string;
export declare type RehypeRewriteOptions = {
/**
* Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)).
* If `selector` is not set then wrap will check for a body all elements.
*/
selector?: string;
/** Rewrite Element. */
rewrite(node: Root | RootContent, index: number | null, parent: Root | Element | null): void;
};
declare const remarkRewrite: Plugin<[RehypeRewriteOptions?], Root>;
export default remarkRewrite;
```
### `selector?: string;`
Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)). If `selector` is not set then wrap will check for a body all elements.
### `rewrite(node, index, parent): void;`
Rewrite element.
## Example
### Example 1
```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
const html = `header
header
header
`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
selector: 'h1',
rewrite: (node) => {
if (node.type === 'element') {
node.properties.className = 'test';
}
}
})
.use(stringify)
.processSync(html)
.toString()
```
> ```html
> header
> header
> header
> ```
> **`Output:`**
>
> ```html
> header
> header
> header
> ```
>
### Example 2
```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
const html = `header
`;
const htmlStr = rehype()
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'body') {
node.properties = { ...node.properties, style: 'color:red;'}
}
}
})
.use(stringify)
.processSync(html)
.toString()
```
> ```html
> header
> ```
> **`Output:`**
>
> ```html
> header
> ```
>
### Example 3
```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
const html = `hello
`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
}
}
})
.use(stringify)
.processSync(html)
.toString()
```
> ```html
> hello
> ```
> **`Output:`**
>
> ```html
> hello world
> ```
>
### Example 4
```js
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import rehypeRaw from 'rehype-raw';
import remark2rehype from 'remark-rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
const html = `hello
`;
const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.properties = { ...node.properties, style: 'color:red;' }
}
}
})
.use(stringify)
.processSync(html)
.toString()
```
> ```html
> hello
> ```
>
> **`Output:`**
>
> ```html
> Hello World!
> ```
>
## Related
- [`rehype-video`](https://github.com/jaywcjlove/rehype-video) Add improved video syntax: links to `.mp4` and `.mov` turn into videos.
- [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) New syntax to add attributes to Markdown.
- [`rehype-ignore`](https://github.com/jaywcjlove/rehype-ignore) Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
- [`remark-github-blockquote-alert`](https://github.com/jaywcjlove/remark-github-blockquote-alert) Remark plugin to add support for GitHub Alert.
## Contributors
As always, thanks to our amazing contributors!
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
MIT © [Kenny Wong](https://github.com/jaywcjlove)
