https://github.com/fregante/zip-text-nodes

Merge the DOM of 2 elements with the same textContent.
https://github.com/fregante/zip-text-nodes

Last synced: about 2 months ago
JSON representation

Merge the DOM of 2 elements with the same textContent.

• Host: GitHub
• URL: https://github.com/fregante/zip-text-nodes
• Owner: fregante
• License: mit
• Created: 2019-05-23T16:39:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-29T19:04:35.000Z (almost 3 years ago)
• Last Synced: 2024-07-11T23:29:44.843Z (2 months ago)
• Language: TypeScript
• Homepage: https://npm.im/zip-text-nodes
• Size: 9.77 KB
• Stars: 33
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
#  zip-text-nodes [![][badge-gzip]][link-bundlephobia]

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/zip-text-nodes.svg?label=gzipped

[link-bundlephobia]: https://bundlephobia.com/result?p=zip-text-nodes

> Merge the DOM of 2 elements with the same textContent.

Given 2 elements:

```html

Hello, world!

```

and:

```html

Hello, world!

```

they are merged into:

```html

Hello, world!

```

This can be useful when running some transformations on the content of an element and successively merging the results or restoring the original markup.

```js

const base = <>I live in Italy>;

const grammar = highlightVerb(base);

// <>I live in Italy> // e.g. the link was lost

zipTextNodes(base, grammar);

// <>I live in Italy>

// The new `em` is copied from `grammar` to `base`

```

Supports overlapping and nested elements.

## Install

```

npm install zip-text-nodes

```

## Setup

```js

const zipTextNodes = require('zip-text-nodes');

```

```js

import zipTextNodes from 'zip-text-nodes';

```

## API

### zipTextNodes(target, source)

#### target

Type: `Element` `DocumentFragment`

The element into which the new children are copied. This element is modified.

#### source

Type: `Element` `DocumentFragment`

The element from which the new children are copied.

# Related

- [insert-text-textarea](https://github.com/fregante/insert-text-textarea) - Insert text in a textarea (supports Firefox and Undo).

- [fit-textarea](https://github.com/fregante/fit-textarea) - Automatically expand a `` to fit its content, in a few bytes.

- [delegate-it](https://github.com/fregante/delegate-it) - DOM event delegation, in <1KB.