React中ReactHtmlParser解析自定义HTML标签及样式配置问题

完全可以实现你的需求，核心是两步：让ElasticSearch返回自定义高亮标签，再确保React能正确解析并为其设置样式。我帮你拆解具体步骤：

1. 先让ElasticSearch返回自定义标签 #

首先要在后端C#的ES查询配置里，把默认的<em>高亮标签替换成你自己的自定义标签，比如<search-highlight>。这样就不会和你现有业务里的<em>冲突了。

示例C#代码：

var searchRequest = new SearchRequest<YourDocumentModel>
{
    Query = // 你的查询逻辑
    Highlight = new Highlight
    {
        Fields = new Dictionary<Field, IHighlightField>
        {
            { 
                "target_field_name", 
                new HighlightField { 
                    PreTags = new[] { "<search-highlight>" }, 
                    PostTags = new[] { "</search-highlight>" } 
                } 
            }
        }
    }
};

2. 确保后端返回的标签未被转义 #

你之前遇到“自定义标签未被识别”的问题，大概率是后端把HTML标签转义成了实体字符（比如<变成<）。ReactHtmlParser会把转义后的内容当成普通文本渲染，自然不会识别成标签。

解决方法：

• 如果用Newtonsoft.Json序列化：

  var jsonSettings = new JsonSerializerSettings
  {
      StringEscapeHandling = StringEscapeHandling.Default // 禁止转义HTML标签
  };
  var responseJson = JsonConvert.SerializeObject(yourResponseData, jsonSettings);
  

• 如果用System.Text.Json：

  var jsonOptions = new JsonSerializerOptions
  {
      Encoder = JavaScriptEncoder.UnsafeRelaxedJsonEscaping // 允许原始HTML标签
  };
  var responseJson = JsonSerializer.Serialize(yourResponseData, jsonOptions);
  

3. 在React中解析并设置样式 #

现在后端返回的字符串已经包含<search-highlight>标签了，接下来用ReactHtmlParser处理，有两种方式：

方式一：直接渲染自定义标签+CSS样式 #

这是最简单的方式，ReactHtmlParser会把自定义标签渲染成原生HTML元素，直接用CSS设置样式即可。

React组件代码：

import ReactHtmlParser from 'react-html-parser';

function SearchResult({ highlightText }) {
  return (
    <div className="search-result">
      {ReactHtmlParser(highlightText)}
    </div>
  );
}

对应的CSS：

search-highlight {
  background-color: #ffeb3b;
  padding: 0 2px;
  font-weight: 500;
}

方式二：转换成React组件（更灵活） #

如果需要给高亮内容添加交互逻辑（比如点击事件），可以通过ReactHtmlParser的transform选项，把自定义标签转换成React元素：

import ReactHtmlParser, { processNodes, convertNodeToElement } from 'react-html-parser';

const transformHighlightNode = (node, index) => {
  if (node.type === 'tag' && node.name === 'search-highlight') {
    return (
      <span key={index} className="custom-highlight">
        {processNodes(node.children, transformHighlightNode)}
      </span>
    );
  }
  // 其他节点保持默认处理
  return convertNodeToElement(node, index, transformHighlightNode);
};

function SearchResult({ highlightText }) {
  return (
    <div className="search-result">
      {ReactHtmlParser(highlightText, { transform: transformHighlightNode })}
    </div>
  );
}

对应的CSS：

.custom-highlight {
  background-color: #ffe082;
  border-radius: 2px;
}

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