24 lines
843 B
TypeScript
24 lines
843 B
TypeScript
import { useCallback } from "react";
|
|
|
|
const HighlightedContent: React.FC<{ html: string; highlightPhrases: string[] }> = ({ html, highlightPhrases }) => {
|
|
|
|
const createHighlightedContent = useCallback(() => {
|
|
if (highlightPhrases.length === 0) {
|
|
return { __html: html };
|
|
}
|
|
|
|
const escapeRegExp = (string: string) => {
|
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
};
|
|
|
|
const regex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'gi');
|
|
const highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);
|
|
|
|
return { __html: highlightedHtml };
|
|
}, [html, highlightPhrases]);
|
|
|
|
return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
|
|
};
|
|
|
|
export default HighlightedContent;
|