Highlighting Keywords Found In Search Results
/// <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>
Currently rated 4.73 by 11 people
Rate Now!
Date Posted:
22 May 2010 19:41
Last Updated:
24 May 2010 12:35
Posted by:
Mikesdotnetting
Total Views to date:
8807
Comments
23 March 2011 11:36 from anooj
Nice,,,,It's very useful.
26 April 2012 20:34 from dimitris
Very nice, solid implementation. Came in handy thank you very much.
01 May 2012 16:43 from 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