util HighlightWords.tsx

0% Statements 0/18

0% Branches 0/2

0% Functions 0/5

0% Lines 0/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import styled from "styled-components";
 
interface HighlightWordsProps {
  text: string;
  words: string[];
}
 
const Wrapper = styled.span`
  white-space: pre;
  span {
    color: ${(props) => props.theme.colors.highlight};
  }
`;
 
const escapeRegExpString = (str: string) =>
  str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
export const HighlightWords = ({ text, words }: HighlightWordsProps) => {
  Iif (!words.length) {
    return <>{text}</>;
  }
 
  const escapeWords = words.map(escapeRegExpString);
 
  const regex = new RegExp(`(${escapeWords.join("|")})`, "gi");
  const parts = text.split(regex);
 
  return (
    <Wrapper>
      {parts.map((part, index) => {
        Iif (
          escapeWords.some((word) =>
            new RegExp(`\\b${word}\\b`, "i").test(part)
          )
        ) {
          return <span key={index}>{part}</span>;
        }
        return part;
      })}
    </Wrapper>
  );
};