Highlighting Search Text Results in ASP.NET Search Page

Use Regex.Replace and Span HTML Tag to Highlight Search Results

by Les Smith

How do I highlight search text results in ASP.NET search page?  In a FAQ page, I have a search functionality.  When I make a find on the search text, I want to highlight in Red, all the instances of the text searched for.  This article shows how to accomplish this functionality.

The code in Figure 1 shows the search code.  First, it calls a DataHelper (DAL) search method to find any matches in the database table for the search text.  If any matches are found, it uses a Regex.Replace to wrap each instance of the search text in an HTML SPAN tag which highlights the finds.


Figure 1 - Search FAQs in DataBase and Highlight Results

DataHelper hlpr = new DataHelper(AppWrapper.DBConnection);   DataTable dt = hlpr.SearchFAQs(searchString);   if (dt.Rows.Count > 0)   {       StringBuilder sb = new StringBuilder();       foreach ( DataRow dr in dt.Rows)       {           string coloredSearchString =               string.Format("<span style=\"background-color:Yellow\">{0}</span>",               searchString);           string question = NullableTypeHelper.NullSafeToString(dr["Question"]);           string answer = NullableTypeHelper.NullSafeToString(dr["Answer"]);           // create regex replace pattern and make it safe by escaping it           string searchPattern = string.Format("(?<find>{0})", searchString);           string replacePattern =               "<span style=\"background-color:Red\">${find}</span>";           // color the searched for text yellow in question and answer           question = Regex.Replace(question, searchPattern, replacePattern,               RegexOptions.IgnoreCase);           answer = Regex.Replace(answer, searchPattern, replacePattern,               RegexOptions.IgnoreCase);           string concat = string.Format("<li>{0}<br />{1}<br /><br />",               question, answer);           sb.Append(concat);       } // foreach       litSearchAnswers.Text=sb.ToString();   } // if   else   {       litSearchAnswers.Text = GetLocalResourceObject("MsgNotFound").ToString();   } // else

Assuming the user searched for the word "list", a small excerpt from the results is shown in Figure 2 below:

Figure 2 - Partial Search Results.

What steps do I follow before sending a message to my contact list? 1. Set up your Business account. 2. Create a contact list of people who will receive your message(s).

If you View the Source behind the search results page, you will see the text shown above as it appers in HTML.  There you can see the results of the Regex.Replace.  This is shown below in Figure 3.

Figure 3 - HTML Source.

What steps do I follow before sending a message to my contact/member <span style="background-color:Red">list</span>?<br />1. Set up your Business account.<br>2. Create a contact <span style="background-color:Red">list</span> of people who will receive your message(s).<BR>

Need to automatically organize your code windows?  You'll be amazed how easy it is to keep the code in your code windows organized.  TRY IT FREE FOR 30 DAYS BY CLICKING HERE.

Automatically generate braces in C#! Try CSharpCompleter and stop wasting valuable time needlessly typing hundreds of braces {} daily.  Try CSharpCompleter for 30 DAYS FREE.

Ask a Question, or give your feedback on my articles or products by going to the KnowDotNet Forum or by clicking on My Blog.

You can also email me directly at les@KnowDotNet.com.