如何在HTML字符串中突出显示searchTerm？

问：

如何在内部文本上突出显示而不突出显示 HTML 标签/元素，例如

等。。。。

我有一个函数，它接受两个字符串 - 一个是文本正文，另一个是searchTerm，目的是如果searchTerm存在于文本正文中，则返回值是突出显示的。

实际的搜索是单独处理的，这只是指突出显示。

我正在处理一个HTML字符串作为搜索正文，因此当提供searchTerm时，它不仅搜索内容，而且还搜索HTML元素。

例如，如果我搜索字母 i - 它会突出显示图像标签中的 i 并将其返回给用户查看。

这是功能

export const getHighlightedText = (
  text: string,
  highlight: string | undefined | null
) => {
  
  if (!highlight || highlight === "") return [text];

 // Split on highlight term and include term into parts, ignore case
  const parts = text?.split(new RegExp(`(${highlight})`, "gi"));
  
  return parts?.map((part, i) =>
    part.toLowerCase() === highlight.toLowerCase()
      ? `<span
      key=${i}
      style="background-color: rgb(232, 187, 73);"
    >${part}</span>`
      : part
  );
};

我试图删除 removeHtmlEntities（请参阅下面的代码片段）它适用于突出显示 - 但由于我的返回的编写方式 - 这意味着我丢失了图像等......

简而言之，我需要删除 HTML 实体，突出显示，然后在“理论”中将 HTML 实体添加回...

export const getHighlightedText = (
  text: string,
  highlight: string | undefined | null
) => {
  
  if (!highlight || highlight === "") return [text];

  const newText = removeHtmlEntities(text);

 // Split on highlight term and include term into parts, ignore case
  const parts = newText?.split(new RegExp(`(${highlight})`, "gi"));
  
  return parts?.map((part, i) =>
    part.toLowerCase() === highlight.toLowerCase()
      ? `<span
      key=${i}
      style="background-color: rgb(232, 187, 73);"
    >${part}</span>`
      : part
  );
};

这是我的removeHTMLEntities函数

const removeHtmlEntities = (inputString: string) => {
var parser = new DOMParser();
var doc = parser.parseFromString(inputString, "text/html");
var decodedString = doc.documentElement.textContent;

return decodedString;
};