Highlighting Keywords Found In Search Results

A common question in the forums is how to highlight key words found in search results. Here's an extension method that does that, both for partial matches, or whole word matches.


/// <summary>
/// Wraps matched strings in HTML span elements styled with a background-color
/// </summary>
/// <param name="text"></param>
/// <param name="keywords">Comma-separated list of strings to be highlighted</param>
/// <param name="cssClass">The Css color to apply</param>
/// <param name="fullMatch">false for returning all matches, true for whole word matches only</param>
/// <returns>string</returns>
public static string HighlightKeyWords(this string text, string keywords, string cssClass, bool fullMatch)
{
  if (text == String.Empty || keywords == String.Empty || cssClass == String.Empty)
    return text;
  var words = keywords.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
  if (!fullMatch)
    return words.Select(word => word.Trim()).Aggregate(text,
                 (current, pattern) =>
                 Regex.Replace(current, 
                                 pattern,
                                   string.Format("<span style=\"background-color:{0}\">{1}</span>", 
                                   cssClass, 
                                   "$0"),
                                   RegexOptions.IgnoreCase));
  return words.Select(word => "\\b" + word.Trim() + "\\b")
              .Aggregate(text,(current, pattern) => 
                        Regex.Replace(current, 
                        pattern,
                          string.Format("<span style=\"background-color:{0}\">{1}</span>", 
                          cssClass, 
                          "$0"),                                           
                          RegexOptions.IgnoreCase));

}

The method uses Regex, so when you add it to a class, make sure you reference System.Text.RegularExpressions. As you can see, it applies a background colour to a span, so a valid CSS colour needs to be passed in. I haven't added any validation to the method to check for a valid colour, but it wouldn't be too difficult to do. For Hex colours, the test would be 6 characters, numbers (0-9) or letters (a-f). RGB colours are composed of 3 sets of numbers between 0 and 255. And there is a finite list of 16 HTML colour names, although you might want to accept SVGA colour names too, which are supported by most browsers. More details on colours can be found here. Alternatively, you can alter the html that this method produces so that the argument can be CSS class name rather than a colour.

As it is, here's how to use it within MVC where I shall pass in the following to the View:


ViewData["temp"] = "aster faster plaster mastering forecaster.";

Within the View itself, using the full word matches option:


<div><%= ViewData["temp"].ToString().HighlightKeyWords("aster", "yellow", true)%></div>


which results in the following:

Changing true to false results nicely in this:

Using the method in Web Forms is easy too. Assuming that a search result has been passed to a DataBound control with an ItemTemplate, here's how it might look:


<ItemTemplate>
   <asp:Label ID="Label1" runat="server" Text='<%# Eval("mySearchResult").ToString().HighlightKeyWords("aster", "yellow", true) %>' />
</ItemTemplate>

Date Posted:
Last Updated:
Posted by:
Total Views to date: 40775

8 Comments

- anooj

Nice,,,,It's very useful.

- dimitris

Very nice, solid implementation. Came in handy thank you very much.

- Atit

Hi,

The solution provided to highlight the terms on web page works okay for single terms. But it is not working if there is a space between the terms.

e.g. searches fine if "companies" is the input
but doesn't work if "companies act" is the input

- kishor

it will give an error if I give a single ( or ) as a keyword

- leo

Hi there,

do you think it would be possible to improve this code for matching provided keywords ignoring accented letters?
for examples if I specify "coupe" as my keyword and I'd like to match coupé in a phrase contains "coupé".

Do you think it would be possible?
I can't find an elegant way.

Regards
Leo

- Mike

@Leo

Thre's a solution to that in: this Stackoverflow post

- Irfan Khan

This is truely helpful. Thank you for the brilliant tip.

- Péter Fuchs

Great Solution. Thx

I get the following Exception: "System.ArgumentNullException: Value cannot be null. Parameter name: input"

I changed your string empty check like this:
if (String.IsNullOrEmpty(text) || String.IsNullOrEmpty(keywords) || String.IsNullOrEmpty(cssClass))
return text;

Recent Comments

Semil 7/1/2015 7:03 AM
In response to iTextSharp - Drawing shapes and Graphics
I have created a rectangle using above methode. Now I want to add a text in the center of this How I...

Satyabrata Mohapatra 6/30/2015 6:12 PM
In response to Reading Excel Files Without Saving To Disk In ASP.NET
Ahh.....this is awesome. Happy to see after a long time you wrote a article on web form :D...

Marty 6/30/2015 7:16 AM
In response to Posting Data With jQuery AJAX In ASP.NET Razor Web Pages
Mike, you're the Man! Another great article. So incredibly helpful. I'm definitely going to buy your...

Rohan 6/30/2015 5:32 AM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Very good and helpful tutorial. Thanks. Just wanted to know what would be the max file size limit we...

Fernando 6/30/2015 1:59 AM
In response to Programmatically accessing data from DataSource controls
What if I want to pass parameters natively using the DataSourceSelectArguments object, instead of be...

pankaj 6/29/2015 3:13 PM
In response to How to retain carriage returns or line breaks in an ASP.NET web page
very nice i'm use this in my code thank you.... ...

Mike 6/29/2015 2:22 AM
In response to MVC 5 with EF 6 in Visual Basic - Sorting, Filtering and Paging
This is the first example that I have found that works....

Marty 6/28/2015 4:57 AM
In response to Posting Data With jQuery AJAX In ASP.NET Razor Web Pages
Mike, what if I don't want to render back the text to the browser, but I want to send it some other...

Mike 6/27/2015 4:00 PM
In response to Migrating Classic ASP To ASP.NET Razor Web Pages Part One- Razor Syntax And Visual Basic
have you used any of the code converters to convert classic asp to c#? If so, which one do you have...

deepan 6/27/2015 12:49 PM
In response to How To Send Email In ASP.NET MVC
Your article is very very useful for me...thanks for giving this article ...this is very simple to u...