Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cutiful/replace-in-html
Replace text in HTML strings without messing up element attributes.
https://github.com/cutiful/replace-in-html
find-and-replace html replace-text
Last synced: 2 months ago
JSON representation
Replace text in HTML strings without messing up element attributes.
- Host: GitHub
- URL: https://github.com/cutiful/replace-in-html
- Owner: cutiful
- License: other
- Created: 2021-10-04T13:39:29.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-25T13:53:16.000Z (almost 2 years ago)
- Last Synced: 2024-10-05T07:06:05.373Z (3 months ago)
- Topics: find-and-replace, html, replace-text
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/replace-in-html
- Size: 271 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- project-awesome - cutiful/replace-in-html - Replace text in HTML strings without messing up element attributes. (JavaScript)
README
# replace-in-html
Replaces text in an HTML fragment without replacing attributes. Only works in a
browser (or JSDOM).
## Examples
```js
replaceInHtml(`meow`, "meow", `
`);
//
replaceInHtml(
`
Nested elements and regexps: replace me! and me!
`,
/(?Nested elements and regexps: replace without replacing "me" in "elements"! and without replacing "me" in "elements"!
replaceInHtml(
`
replacer can be a string or a function returning $return_types`,
/\$return_types/g,
match => {
const el = document.createElement("span");
el.className = match.slice(1);
el.innerHTML = "a string, DOM Node or an array of DOM Nodes";
return el;
},
);
//
replacer can be a string or a function returning a string, DOM Node or an array of DOM Nodes
replaceInHtml(
`
So let's try an example closer to the real world:question:
How about... :lightbulb: custom emoji tags? :blobcat:
`,
/:[a-zA-Z0-9_]{2,}:/g,
match => {
const el = document.createElement("img");
el.className = "custom_emoji";
el.alt = el.title = match;
el.src = `https://cdn.example.org/i/emoji/${match.slice(1, -1)}.png`;
return el;
},
);
//
So let's try an example closer to the real world
// How about... 
custom emoji tags? 
```
## Installation
### Webpack / Rollup
NPM:
```sh
npm install replace-in-html
```
Yarn:
```sh
yarn add replace-in-html
```
then in JS:
```js
import replaceInHtml from "replace-in-html";
const replaced = replaceInHtml("
original html
", /original/g, "modified");
console.log(replaced);
```
### Browser
```html
const replaced = window.replaceInHtml("<p>original html</p>", /original/g, "modified");
console.log(replaced);
```
## Usage
```js
replaceInHtml(html, search, replacer)
```
- `html`: a string containing the HTML to perform the replacing on (note that it can't be a document with ``, `` or ``; it should only contain elements that go inside ``)
- `search`: a string or `RegExp` to replace (don't forget `/g` in the regular expression if you want to find all matching substrings!)
- `replacer`: either an HTML string to replace with; or a function that accepts the matching text and returns an HTML string, a `Node` (e. g. created using `document.createElement(name)`) or an array of `Node`s
Returns an HTML string.
## How it works
`replace-in-html` uses `DOMParser` to parse your HTML into an isolated document
that doesn't have access to your page; traverses it, replaces any matching text
and returns the resulting body. It's safe, small and decently fast. (Note that
if you're processing user-generated HTML, you still have to sanitize it.)
***
© 2021 [cutiful](https://github.com/cutiful)