如何在HTML内容中高亮搜索词？不修改链接URL及Title属性

别用正则处理HTML，很容易误改链接的href、title这类属性里的关键词。用HtmlAgilityPack完全不用重构整个文档，核心是只处理纯文本节点，跳过元素属性内容即可实现需求。

具体实现步骤 #

• 先把CMS输出的HTML片段加载到HtmlDocument：

  var htmlDoc = new HtmlDocument();
  htmlDoc.LoadHtml(yourCmsHtmlContent);
  

• 筛选出需要处理的文本节点，跳过脚本、样式这类不需要高亮的内容：

  var textNodes = htmlDoc.DocumentNode.Descendants()
      .Where(n => n.NodeType == HtmlNodeType.Text 
                  && !n.ParentNode.Name.Equals("script", StringComparison.OrdinalIgnoreCase)
                  && !n.ParentNode.Name.Equals("style", StringComparison.OrdinalIgnoreCase));
  

• 遍历文本节点，将关键词替换为带高亮span的内容，全程不碰任何元素属性：

  string searchTerm = "commissioner";
  foreach (var textNode in textNodes.ToList()) // 转成List避免遍历中修改集合报错
  {
      var originalText = textNode.InnerText;
      if (!originalText.Contains(searchTerm, StringComparison.OrdinalIgnoreCase))
          continue;
  
      // 正则替换关键词，用Escape处理特殊字符，保留原大小写
      var highlightedText = Regex.Replace(originalText, 
          Regex.Escape(searchTerm), 
          match => $"<span class=\"highlight\">{match.Value}</span>", 
          RegexOptions.IgnoreCase);
  
      // 创建临时节点解析替换后的内容，拆分后插入原文本节点位置
      var tempNode = HtmlNode.CreateNode($"<div>{highlightedText}</div>");
      foreach (var child in tempNode.ChildNodes)
      {
          textNode.ParentNode.InsertBefore(child, textNode);
      }
      // 删除原文本节点
      textNode.Remove();
  }
  

• 最后获取处理完成的HTML：

  var processedHtml = htmlDoc.DocumentNode.OuterHtml;
  

核心逻辑说明 #

• 只针对HtmlNodeType.Text类型节点操作，彻底避开元素的属性内容，从根源杜绝误改链接属性的问题。
• 通过临时节点拆分替换后的内容，把单个文本节点拆成文本+span的混合节点，无需重构整个文档结构。
• 给span定义highlight类后，前端可以自定义高亮样式（比如背景黄、字体加粗）。

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