https://github.com/ephys/dom-string-wrapper
Wraps parts of a node's textContent with a DOM Range
https://github.com/ephys/dom-string-wrapper
Last synced: 4 months ago
JSON representation
Wraps parts of a node's textContent with a DOM Range
- Host: GitHub
- URL: https://github.com/ephys/dom-string-wrapper
- Owner: ephys
- License: mit
- Created: 2016-05-06T13:08:30.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-06T13:30:55.000Z (about 10 years ago)
- Last Synced: 2025-01-31T21:16:21.174Z (over 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dom-text-finder
Utilitary functions to manipulate a DOM Node's textContent without damaging (reseting) its existing child nodes.
## Installation
`npm install --save dom-string-wrapper`
## Usage
The package provides 2 functions: `wrapText` and `wrapTextAll`, the first one returns a [`Range`](https://developer.mozilla.org/en/docs/Web/API/Range), the second one returns an array of `Range`s. They allow you to create a range that will wrap a part of a node's textContent.
```
/* For instance, let's take the following node */
var pNode = document.createElement('p');
var pNode.innerHTML = 'Well, Hello world :)';
/* and add an event listener to the span child. */
pNode.querySelector('strong').addEventListener('hover', doSomethingImportant);
/* let's now say that we wish to wrap Hello World in a Anchor node, we could do the following: */
var pNode.innerHTML = 'Well, Hello world :)';
/* But that would reset the whole content and we would lose the event listener we added on .
* That's where this module comes in. You can achieve the same goal without resetting anything. */
var wrapText = require('dom-string-wrapper').wrapText;
// returns a range wrapping 'Hello world'
var range = wrapText(pNode, 'Hello world');
/* You can then use the native range methods to manipulate the content. In this case, we need surroundContents. */
var aNode = document.createElement('a');
aNode.href = '...';
range.surroundContents(aNode);
```