ASP.NET 搜尋關鍵字高亮顯示：關鍵字分詞、HTML 編碼、Regex 替換實戰

搜尋結果頁高亮關鍵字能提升使用者辨識度。核心步驟：**分詞 → HTML 編碼內容 → 正則替換關鍵字為 <mark> 標籤 → 輸出**。本文提供完整工具類與前端繫結範例。

核心工具類

public static class HighlightHelper
{
    /// 

    /// 將文字中所有關鍵字包裝為 <mark class="highlight">...</mark>
    /// 
    public static string HighlightKeywords(string htmlEncodedText, IEnumerable keywords)
    {
        if (string.IsNullOrEmpty(htmlEncodedText) || keywords == null) return htmlEncodedText;

        // 1. 過濾空白、去重、長關鍵字優先 (避免短詞破壞長詞)
        var kws = keywords
            .Where(k => !string.IsNullOrWhiteSpace(k))
            .Select(k => k.Trim())
            .Distinct(StringComparer.OrdinalIgnoreCase)
            .OrderByDescending(k => k.Length)
            .ToList();

        if (kws.Count == 0) return htmlEncodedText;

        // 2. 建構 Regex：單字邊界 \b (中文不適用)，改用簡單字串替換或零寬斷言
        // 這裡採用 Regex.Escape + 替換，不區分大小寫
        foreach (var kw in kws)
        {
            string pattern = Regex.Escape(kw);
            htmlEncodedText = Regex.Replace(htmlEncodedText, pattern,
                m => $"{m.Value}",
                RegexOptions.IgnoreCase);
        }
        return htmlEncodedText;
    }
}

實體類別 (Model)

public class NewsItem
{
    public string Title { get; set; }
    public string Content { get; set; }
    public DateTime PublishTime { get; set; }

    // 僅供前端繫結用的高亮屬性 (不存資料庫)
    public string HighlightedTitle { get; set; }
    public string HighlightedContent { get; set; }
}

控制器/頁面邏輯

protected void btnSearch_Click(object sender, EventArgs e)
{
    string rawKeyword = txtKeyword.Text.Trim();
    if (string.IsNullOrEmpty(rawKeyword)) return;

    // 簡易分詞：空白、逗號、全形空白
    var keywords = rawKeyword.Split(new[] { ' ', ',', '，', '　' }, StringSplitOptions.RemoveEmptyEntries);

    var results = NewsService.Search(rawKeyword); // 回傳 List

    foreach (var item in results)
    {
        // 先 HTML 編碼，防 XSS，再高亮
        item.HighlightedTitle = HighlightHelper.HighlightKeywords(HttpUtility.HtmlEncode(item.Title), keywords);
        item.HighlightedContent = HighlightHelper.HighlightKeywords(HttpUtility.HtmlEncode(item.Content), keywords);
    }

    rptResults.DataSource = results;
    rptResults.DataBind();
}

前端繫結 (Repeater)

<asp:Repeater ID="rptResults" runat="server">
  <ItemTemplate>
    <h3><%# Eval("HighlightedTitle") %></h3>
    <p><%# Eval("HighlightedContent") %></p>
    <small><%# Eval("PublishTime", "{0:yyyy-MM-dd}") %></small>
  </ItemTemplate>
</asp:Repeater>

CSS 樣式

mark.highlight { background: #ff0; color: #000; padding: 0 2px; border-radius: 2px; }

關鍵注意事項

• 先 HtmlEncode 再高亮，否則使用者輸入 <script> 會被當標籤輸出導致 XSS。
• 關鍵字**長者優先替換**，避免「ASP.NET」先替換「ASP」導致殘留「.NET」。
• 中文無單字邊界 \b，直接字串替換或 Regex 皆可；英文建議 \\b{kw}\\b。
• 大量資料考慮資料庫全文檢索 (SQL Server Full-Text, Elasticsearch) 並由前端高亮。