Replace-any NPM

replace-any

Flexible string replacement.

Installation

Add the dependency to your project:

$ npm install --save-dev replace-any

Usage

You can use replaceAny to replace parts of a string with anything you want: other strings, objects, even JSX elements!

You just need to pass two arguments:

An array of replacers, where each replacer specifies a regular expression to execute and a function that produces the replacement
The string you want to replace

You'll get back an array with the results of applying all your replacers:

import { replaceAny } from 'replace-any';

const lineBreakReplacer = {
  regexp: new RegExp('\\n', 'gi'),
  replace: (key) => <br key={key} />,
};

const linkReplacer = {
  regexp: new RegExp('https?://[^\\s]+', 'gi'),
  replace: (key, text) => <a key={key} href={text}>{text}</a>
};

const replacers = [lineBreakReplacer, linkReplacer]
const processMessage = (body) => replaceAny(replacers, body);

processMessage('Hi there!\n\nGo to https://www.github.com and star this project!')
// [
//   "Hi there!",
//   <br />,
//   <br />,
//   "Go to ",
//   <a href="https://www.github.com">https://www.github.com</a>,
//   " and star this project!"
// ]

You can then use this in your React components:

import React, { Component } from 'react';

class Message extends Component {
  render() {
    return (
      <div className="Message">
        {processMessage(this.props.body)}
      </div>
    )
  }
}