# split-text-nodes

> Split text nodes into arbitrary chunks then wrap each chunk in an element.

Latest version **9.0.0** (published 2024-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install split-text-nodes
pnpm add split-text-nodes
yarn add split-text-nodes
bun add split-text-nodes
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.0 |
| Published | 2024-04-09 |
| First published | 2021-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | ^20.0.0 |
| Dependencies | 0 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | psalaets |

## Links

- npm: https://www.npmjs.com/package/split-text-nodes
- Repository: https://gitlab.com/psalaets/split-text-nodes
- Issues: https://gitlab.com/psalaets/split-text-nodes/issues
- npm.io page: https://npm.io/package/split-text-nodes

## Recent versions

- 9.0.0 (latest) — 2024-04-09
- 8.2.0 — 2024-04-09
- 8.1.0 — 2024-03-15
- 8.0.0 — 2023-06-07
- 7.0.0 — 2023-06-07
- 6.1.0 — 2023-02-20
- 6.0.0 — 2023-02-18
- 5.0.1 — 2023-02-11
- 5.0.0 — 2023-02-11
- 4.0.0 — 2023-02-08
- 3.1.0 — 2023-01-15
- 3.0.0 — 2021-11-19
- 2.2.0 — 2021-11-19
- 2.1.0 — 2021-10-26
- 2.0.1 — 2021-10-14
- … 6 more at https://npm.io/package/split-text-nodes/versions

## README

# split-text-nodes

Split text nodes into arbitrary chunks then wrap each chunk in an element.

## Install

```
npm install split-text-nodes
```

## Examples

https://psalaets.gitlab.io/split-text-nodes/

## Usage

Starting with this DOM...

```html
<div id="element">one two</div>
```

Call `splitTextNodes`

```js
import { splitTextNodes } from 'split-text-nodes';

const element = document.getElementById('element');
const result = splitTextNodes(element);
```

and now wrapper elements have been added to the text.

```html
<div id="element">
  <span>one</span><span> </span><span>two<span>
</div>
```

Do something with the spans, then optionally remove the wrapper elements

```js
// result was defined in previous JavaScript block
result.revert();
```

and finally the DOM is back to its original state.

```html
<div id="element">one two</div>
```

## API

### splitTextNodes(element, options = {})

Split an element's text nodes into chunks and wrap each chunk with a wrapper element.

By default the wrapper element is a `span` but this can be changed using the [options](#options).

#### element

`HTMLElement` containing some text nodes

#### options

```ts
type Options = {
  /**
   * Split a text node.
   *
   * Optional, defaults to splitting by `/\b/`.
   *
   * @param text Text of the text node.
   * @returns Sequence of strings. Every string in this iterable is a candidate
   * to be wrapped in its own element (see `wrap` option).
   */
  split?: (text: string) => Iterable<string>;
  /**
   * Wraps a text chunk yielded by `split()` with an html element.
   *
   * Optional, defaults to wrapping every text chunk with a `<span>`.
   *
   * @param chunk Text chunk to wrap
   * @param textNode Text node that `chunk` came from.
   * @returns Element that wraps `chunk`, or `chunk` itself if `chunk` should
   * not be wrapped.
   */
  wrap?: (chunk: string, textNode: Text) => HTMLElement | string;
};
```

#### Returns

```ts
type SplitResult = {
  /**
   * Wrapper elements created by `wrap`.
   */
  wrappers: Array<HTMLElement>;
  /**
   * Reverts child content of `element` back to its original state.
   */
  revert: () => void;
};
```

## License

MIT

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