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: Saturday, May 22, 2010 7:41 PM
Last Updated: Monday, May 24, 2010 12:35 PM
Posted by: Mikesdotnetting
Total Views to date: 32405

6 Comments

Wednesday, March 23, 2011 11:36 AM - anooj

Nice,,,,It's very useful.

Thursday, April 26, 2012 8:34 PM - dimitris

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

Tuesday, May 1, 2012 4:43 PM - 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

Wednesday, July 2, 2014 12:51 PM - kishor

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

Friday, November 7, 2014 4:53 PM - 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

Saturday, November 8, 2014 7:28 AM - Mike

@Leo

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

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

Allen Michaels 12/17/2014 4:37 PM
In response to Cascading DropDownLists with jQuery and ASP.NET
Fantastic thank you so much!...

Emily 12/17/2014 12:36 PM
In response to Parameterized IN clauses with ADO.NET and LINQ
Thanks, very helpful!!!! Can i use this for multiple in's ????? IN (.....) and IN(...) and IN...

sss 12/16/2014 3:06 PM
In response to Solving the Operation Must Use An Updateable Query error
good...

Gjuro 12/15/2014 10:30 PM
In response to Examining the Edit Methods and Edit View
You have one fromr (and it should be from, I suppose). :-)...

Gjuro 12/15/2014 10:27 PM
In response to Adding Search
Hi, thnx for all this C#->VB translations. Yet, the following code block is (slightly) in error it a...

Scot 12/14/2014 1:39 PM
In response to Entity Framework 6 Recipe - Alphabetical Paging In ASP.NET MVC
Thanks,Mike I found solution....

Gjuro 12/13/2014 10:52 PM
In response to Accessing Your Model's Data from a Controller
The article mentions "Creating an Entity Framework Data Model for an ASP.NET MVC Application" (at is...

Samuel 12/13/2014 8:40 AM
In response to Displaying The First n Characters Of Text
I have failed to use the extension because it throws an error that it doesn't recognise the chop be...

Ignas 12/12/2014 5:11 PM
In response to Cleaner Conditional HTML Attributes In Razor Web Pages
Any suggestions for Html Helper elements with HtmlAttributes, when you need to conditionally set it...

Gautam 12/11/2014 8:50 PM
In response to Validation In Razor Web Pages 2
Hi Mike Is this required for V3, non html helper input...