dom-text v0.2.0

domText

domText is a library for manipulating text in dom. It only supports browser

Getting started

npm install dom-text

ES Module

import { findAndReplace } from 'dom-text';

findAndReplace(document.getElementById('container'), {
  find: 'hello',
  replace: 'hi',
});

UMD

<script src="node_modules/dom-text/dist/domText.js"></script>

<script>
  domText.findAndReplace(document.getElementById('container'), {
    find: 'hello',
    replace: 'hi',
  });
</script>

Features

Find text and replace

find text in DOM and replace it with everything what you want. try a demo

API

findAndReplace

Arguments

• el (Element): target element for finding text
• options (object)
• options.flag (string): regular expression flag
• options.find (string): regular expression string
• options.replace (string|function)

Return

• Finder

Examples

import { findAndReplace } from 'dom-text';

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

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

  /**
   * @param {object} param
   * @param {string} param.offsetText regular expression matching text.
   *  It might be part of matching text or whole part.
   * @param {string} param.offsetNode regular expression matching text node.
   *  It might be part of matching text node or whole part.
   * @param {RegExpExecArray} param.regExpExecArray regular expression exec's result of
   *  matching text @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
   * @return {string|Node} it will replace matching part of text node with string(HTML) or node
   */
  replace: ({ offsetText, offsetNode, regExpExecArray }) => {
    return `<b>${offsetText}</b>`
  },
});

import { findAndReplace } from 'dom-text';

// find link in id 'root' element and make anchor element
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, regExpExecArray }) => {
    return `<a href="${regExpExecArray[0]}">${offsetText}</a>`;
  },
});