Fuse.js with highlight

highlight.ts

const highlight = (fuseSearchResult: any, highlightClassName: string = 'highlight') => {
  const set = (obj: object, path: string, value: any) => {
      const pathValue = path.split('.');
      let i;

      for (i = 0; i < pathValue.length - 1; i++) {
        obj = obj[pathValue[i]];
      }

      obj[pathValue[i]] = value;
  };

  const generateHighlightedText = (inputText: string, regions: number[] = []) => {
    let content = '';
    let nextUnhighlightedRegionStartingIndex = 0;

    regions.forEach(region => {
      const lastRegionNextIndex = region[1] + 1;

      content += [
        inputText.substring(nextUnhighlightedRegionStartingIndex, region[0]),
        `<span class="${highlightClassName}">`,
        inputText.substring(region[0], lastRegionNextIndex),
        '</span>',
      ].join('');

      nextUnhighlightedRegionStartingIndex = lastRegionNextIndex;
    });

    content += inputText.substring(nextUnhighlightedRegionStartingIndex);

    return content;
  };

  return fuseSearchResult
    .filter(({ matches }: any) => matches && matches.length)
    .map(({ item, matches }: any) => {
      const highlightedItem = { ...item };

      matches.forEach((match: any) => {
        set(highlightedItem, match.key, generateHighlightedText(match.value, match.indices));
      });

      return highlightedItem;
    });
};

// usage:

const res = highlight(fuse.search(text)); // array of items with highlighted fields

Removed _. on line 41 and it worked great - thanks!

awesome, thanks!

The type on the regions is actually a bit off. And in React, any leading or trailing spaces are ignored, so you lose spaces between matches.. Here's adapted version that solved the problems for me for use in react.

export const highlightMatches = (inputText: string, regions: [number, number][] = []) => {
  const children: React.ReactNode[] = [];
  let nextUnhighlightedRegionStartingIndex = 0;

  regions.forEach((region, i) => {
    const lastRegionNextIndex = region[1] + 1;

    children.push(
      ...[
        inputText.substring(nextUnhighlightedRegionStartingIndex, region[0]).replace(' ', '\u00A0'),
        <span key={region + ' ' + i} className='fuse-highlight'>
          {inputText.substring(region[0], lastRegionNextIndex).replace(' ', '\u00A0')}
        </span>,
      ]
    );

    nextUnhighlightedRegionStartingIndex = lastRegionNextIndex;
  });

  children.push(inputText.substring(nextUnhighlightedRegionStartingIndex).replace(' ', '\u00A0'));

  return <>{children}</>;
};