react-process-string

The library allows you to process strings with regular expressions in ReactJS.

Installation

Via npm:

npm install react-process-string --save

Syntax

processString(options)(string);

Options should be an array of objects containing regex and fn fields. fn is a function that takes two arguments: key, to pass it to a react component and result — the result of regex executing.

Example usage

const processString = require("react-process-string");

class HelloWorld extends React.Component {
  render() {
    let config = [
      {
        regex: /(http|https):\/\/(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
        fn: (key, result) => (
          <span key={key}>
            <a
              target="_blank"
              href={`${result[1]}://${result[2]}.${result[3]}${result[4]}`}
            >
              {result[2]}.{result[3]}
              {result[4]}
            </a>
            {result[5]}
          </span>
        )
      },
      {
        regex: /(\S+)\.([a-z]{2,}?)(.*?)( |\,|$|\.)/gim,
        fn: (key, result) => (
          <span key={key}>
            <a
              target="_blank"
              href={`http://${result[1]}.${result[2]}${result[3]}`}
            >
              {result[1]}.{result[2]}
              {result[3]}
            </a>
            {result[4]}
          </span>
        )
      }
    ];

    let stringWithLinks = "Watch this on youtube.com";
    let processed = processString(config)(stringWithLinks);

    return <div>Hello world! {processed}</div>;
  }
}

On the user side, processed will contain clickable links.

Example №2

let users = ourStore.users;
let stringWithUsername = "Hello @efog, how do you feel today?";

let processed = processString([
  {
    regex: /\@([a-z0-9_\-]+?)( |\,|$|\.)/gim, //regex to match a username
    fn: (key, result) => {
      let username = result[1];
      let foundUsers = users.filter(user => user.username === username);

      if (!foundUsers.length) return result[0]; //@username

      return (
        <a key={key} href={`/user/${username}`}>
          @{username}
        </a>
      );
    }
  }
]);

This code allows us to make @usernames clickable.

Example №3

render() {
    const text =
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

    return;
    St([
      {
        regex: /(.)+?\./g,
        fn: (key, res) => (
          <span key={key}>
            {res}
            <br />>
          </span>
        )
      }
    ])(text);
  }

This code breaks text to lines by periods.