如何在react-highlight-words中使用dangerouslySetInnerHTML解析HTML文本？

我之前也碰到过类似的困扰，react-highlight-words确实没有直接支持HTML内容的配置，不过有几个可行的解决方案可以试试：

方案1：自定义高亮组件（适合可信HTML内容） #

如果你的HTML内容是完全可信的（比如来自后台可控的输出，没有用户输入风险），可以直接手动处理HTML字符串，把搜索关键词用高亮标签包裹后，通过dangerouslySetInnerHTML渲染。

示例代码：

import React from 'react';

const HtmlHighlighter = ({ searchWords, htmlText }) => {
  // 处理搜索词，转义正则特殊字符避免匹配出错
  const highlightText = (text) => {
    if (!searchWords.length) return text;
    
    const escapedWords = searchWords.map(word => 
      word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    );
    const regex = new RegExp(`(${escapedWords.join('|')})`, 'gi');
    
    return text.replace(regex, '<span class="highlight">$1</span>');
  };

  const processedHtml = highlightText(htmlText);
  return <span dangerouslySetInnerHTML={{ __html: processedHtml }} />;
};

// 使用方式
<HtmlHighlighter searchWords={[this._input]} htmlText={value} />

记得给.highlight类添加你需要的样式，比如背景黄底之类的。

方案2：解析HTML为React元素后高亮（更安全） #

如果HTML内容不可信，或者你想避免dangerouslySetInnerHTML的XSS风险，可以先把HTML解析成React元素，再针对文本节点应用高亮。这里可以借助react-html-parser库来处理：

1. 先安装依赖：

npm install react-html-parser

2. 封装解析和高亮逻辑：

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import Highlighter from 'react-highlight-words';

const HtmlSafeHighlighter = ({ searchWords, htmlText }) => {
  const transformNode = (node) => {
    // 只处理文本节点
    if (node.type === 'text') {
      return (
        <Highlighter
          searchWords={searchWords}
          textToHighlight={node.value}
          highlightClassName="highlight"
        />
      );
    }
    // 递归处理子节点
    if (node.type === 'tag' && node.children) {
      return React.createElement(
        node.name,
        node.attribs,
        node.children.map(transformNode)
      );
    }
    return node;
  };

  return ReactHtmlParser(htmlText, { transform: transformNode });
};

// 使用方式
<HtmlSafeHighlighter searchWords={[this._input]} htmlText={value} />

这个方法会把HTML拆分成React元素，只在纯文本节点上使用react-highlight-words，既保留了HTML结构，又避免了直接插入HTML的风险。

方案3：修改react-highlight-words源码（不推荐） #

如果你愿意维护自定义版本的库，可以直接修改react-highlight-words的源码，让它支持解析HTML。不过这种方式后续升级库的时候会很麻烦，除非你有特殊需求，否则不建议这么做。

内容的提问来源于stack exchange，提问作者gospodin