# dom-find-and-replace

> Find some text in the dom and replace with what you want

Latest version **1.4.7** (published 2023-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install dom-find-and-replace
pnpm add dom-find-and-replace
yarn add dom-find-and-replace
bun add dom-find-and-replace
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.7 |
| Published | 2023-01-10 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Youngjin Jang |
| Maintainers | swimyoung |

## Links

- npm: https://www.npmjs.com/package/dom-find-and-replace
- Repository: https://github.com/swimyoung/dom-find-and-replace
- Homepage: https://github.com/swimyoung/dom-find-and-replace#readme
- Issues: https://github.com/swimyoung/dom-find-and-replace/issues
- npm.io page: https://npm.io/package/dom-find-and-replace

## Dependencies (1)

- [dom-node-type](https://npm.io/package/dom-node-type.md) 1.1.1

## Recent versions

- 1.4.7 (latest) — 2023-01-10
- 1.4.6 — 2022-04-01
- 1.4.5 — 2022-04-01
- 1.4.4 — 2022-04-01
- 1.4.3 — 2021-06-06
- 1.4.2 — 2021-06-06
- 1.4.1 — 2021-06-06
- 1.4.0 — 2021-04-03
- 1.3.4 — 2020-06-18
- 1.3.3 — 2020-06-18
- 1.3.2 — 2019-12-18
- 1.3.1 — 2019-11-28
- 1.3.0 — 2019-11-25
- 1.2.3 — 2019-11-13
- 1.2.2 — 2019-11-13
- … 6 more at https://npm.io/package/dom-find-and-replace/versions

## README

# DOM find and replace 🔎

Find some text in the dom and replace with what you want. It only supports browser environment

Demo: https://swimyoung.github.io/dom-find-and-replace/


## Getting started

```sh
npm install dom-find-and-replace
```

```js
import { findAndReplace } from 'dom-find-and-replace';

// return: function that recover replacement
const recover = findAndReplace(
  document.getElementById('container'), 
  {
    find: 'hello',
    replace: 'hi',
  }
);

// return: html
const html = findAndReplace(
  `<div>hello</div>`, 
  {
    find: 'hello',
    replace: 'hi',
  }
);
```

## API

### findAndReplace

#### Arguments

- target (`Element` | `string`): an element or HTML string
- params (`object`)
  - flag (`string`): a regular expression flag
  - find (`string`): a regular expression string
  - replace (`string` | `(offsetText, foundText) => Node`)

#### Return

- `() => void` | `string`: it returns html string when target is html string otherwise function that you can recover replacement

#### Examples

```js
import { findAndReplace } from 'dom-find-and-replace';

// find 'hello' in id 'container' element and replace it with 'hi'
const recover = findAndReplace(document.getElementById('container'), {
  find: 'hello',
  replace: 'hi',
});

// find 'hello' in id 'container' element and wrap with bold element
const recover = findAndReplace(document.getElementById('container'), {
  find: 'hello',

  /**
   * @param {string} offsetText a part of matched text or whole part
   * @param {string} foundText a matched text
   * @return {Node} it replaces a matched text node with a given node
   */
  replace: (offsetText, foundText) => {
    const bold = document.createElement('bold');
    bold.textContent = offsetText;
    return bold;
  },
});

// find link in id 'root' element and make an anchor element
const recover = findAndReplace(document.getElementById('root'), {
  flag: 'gi',

  // @see https://stackoverflow.com/questions/3809401/what-is-a-good-regular-expression-to-match-a-url for url matching regular expression
  find:
    'https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{2,256}.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\\+.~#?&//=]*)',

  replace: (offsetText, foundText) => {
    const anchor = document.createElement('a');
    anchor.textContent = offsetText;
    anchor.setAttribute('href', foundText);
    return anchor;
  },
});
```

---
_Source: https://npm.io/package/dom-find-and-replace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._