regex text/JSX highlighters

highlightJSX.js

// quick and dirty 
highlightJSX(stringToEvaluate, searchTerm) {
  const regex = new RegExp(searchTerm, 'gi');
  const resultText = stringToEvaluate.replace(regex, `<mark class="highlight">$&</mark>`);
  return <span dangerouslySetInnerHTML={{ __html: resultText }} />;
}
// highlightJSX('this is a string to search and to evaluate', 'to')
// expected output
// <>this is a string <mark class="highlight">to</mark> search and <mark class="highlight">to</mark> evaluate<>
    
// safer, but slightly more complex
import reactStringReplace from 'react-string-replace'
const stringToEvaluate = 'this is a string to search and to evaluate'
const searchTerm = 'to'
const highlightedMatch = reactStringReplace(stringToEvaluate, new RegExp(`(${searchTerm})`, "gi"), (match, i) => (
  <span key={i} className='text-boldest' style={{ color: '#F1C40F' }}>{match}</span>
))
// expected output
// <>this is a string <span key={0} className='text-boldest' style={{ color: '#F1C40F' }}>to</span> search and <span key={1} className='text-boldest' style={{ color: '#F1C40F' }}>to</span> evaluate<>