FuzzyHighlighter.js

import React from 'react';

/* Usage:
  <FuzzyHighlighter query="some" text="something"/>
*/

const FuzzyHighlighter = ({ className, query = '', text = '' }) => {
  let lastIdx = 0;
  let tSearch = text.toLowerCase();
  const indices = query.toLowerCase().split('')
    .map((c) => {
      let idx = tSearch.indexOf(c, lastIdx);
      if (idx > -1) {
        lastIdx++;
        return idx;
      }
      return null;
    })
    .filter((i) => i !== null)

  return (
    <span>
      { !query.length && text}
      { !!query.length && text.split('').map((tc, i) =>
        <span style={{
          fontWeight: indices.indexOf(i) > -1 ? 'bold' : 'normal'
        }}>
          { tc }
        </span>
      )}
    </span>
  )
}

export default FuzzyHighlighter