Skip to content

Merge the DOM of 2 elements with the same textContent.

License

Notifications You must be signed in to change notification settings

fregante/zip-text-nodes

Repository files navigation

zip-text-nodes

Merge the DOM of 2 elements with the same textContent.

Given 2 elements:

Hello, <strong>world!</strong>

and:

<em>Hello</em>, world!

they are merged into:

<em>Hello</em>, <strong>world!</strong>

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

const base = <>I live in <a href="it">Italy</a></>;
const grammar = highlightVerb(base);
// <>I <em>live</em> in Italy</> // e.g. the link was lost

zipTextNodes(base, grammar);
// <>I <em>live</em> in <a href="it">Italy</a></>
// The new `em` is copied from `grammar` to `base`

Supports overlapping and nested elements.

Install

npm install zip-text-nodes

Setup

const zipTextNodes = require('zip-text-nodes');
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