react-text-matcher

A React component that matches text using specified rules, supporting string and regular expressions. Developed based on text-matcher.

You can receive the matching results through render-props and have full control over how it renders. If you just want text highlighting, recommend using react-highlight-words, because it provides a simpler API.

Install

npm install @shhhplus/react-text-matcher --save

Usage

Basic

import TextMatcher from '@shhhplus/react-text-matcher';

const Demo = () => {
  return (
    <TextMatcher
      rules="everyone"
      text="Welcome everyone to come and join my birthday party."
    >
      {(nodes) => {
        return (
          <>
            {nodes.map((node, idx) => {
              return (
                <Fragment key={idx}>
                  {typeof node === 'string' ? node : <span>{node.text}</span>}
                </Fragment>
              );
            })}
          </>
        );
      }}
    </TextMatcher>
  );
};

RegExp

import TextMatcher from '@shhhplus/react-text-matcher';

const Demo = () => {
  return (
    <TextMatcher
      rules={[new RegExp('food', 'gi'), 'Apple']}
      text="AppleTodayFoodAppleHappySunFood"
    >
      {(nodes) => {
        return (
          <>
            {nodes.map((node, idx) => {
              return (
                <Fragment key={idx}>
                  {typeof node === 'string' ? node : <span>{node.text}</span>}
                </Fragment>
              );
            })}
          </>
        );
      }}
    </TextMatcher>
  );
};