Highlight text in React by providing text and RegExp pattern.

react-highlight-text-by-pattern.js

function highlightPattern(text, pattern) {
  const splitText = text.split(pattern);

  if (splitText.length <= 1) {
    return text;
  }

  const matches = text.match(pattern);

  return splitText.reduce((arr, element, index) => (matches[index] ? [
    ...arr,
    element,
    <mark key={index}>
      {matches[index]}
    </mark>,
  ] : [...arr, element]), []);
}

Easy to do so here : https://www.npmjs.com/package/reactjs-editor?activeTab=readme

Demo here: https://reactjs-editor-demo.vercel.app/