Jeamd/keyword-highlight

富文本高亮关键字

keywords-highlight-html

---

一个提供富文本高亮关键字工具

Install

npm i --save-dev keywords-highlight-html

yarn add --dev keywords-highlight-html

方法属性配置

属性	说明	类型	默认值
content	文本内容	string	-
keywords	维护的关键字信息表	HighlightKeyWord[]	-

HighlightKeyWord 属性

属性	说明	类型	默认值
word	要匹配的关键字	string	-
transformer	对匹配到的关键字如何转换	(node: string) => string;	-

Usage

---

react

const Highlight = () => {
  const [html, setHtml] = useState<string>("");

  const setHighLightStringDom = useCallback(async (html: string) => {
    const highlightDom = await KeywordHighLight(html, [
      {
        word: "JavaScript",
        transformer: (node) => `<span class="high-light">${node}</span>`,
      },
    ]);
    setHtml(highlightDom);
  }, []);

  useEffect(() => {
    const html = data || "";
    setHighLightStringDom(html);
  }, [setHighLightStringDom]);

  return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
};