asp.net source code blog

Sometimes it's a good idea to highlight some text in the page. We use it when search to highlight the seaching words in the result(for presenting result we use GridView):

There're some ways for doing that:

1) To format the highlighted text on server site - To handle the Item Create Event and to replace text with something like : <font ....> </font>, but it looks like bad solution. All that operation will be done on the server, so in many search operation it may slow down the app. That's why we prefer you:

2) To format the highlighted text on the client site - with javascript functions. Follows all steps how you can do it:

I. Make a javascript file and include the code below(No modification is needed, just copy-paste the code):

function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)
{
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
highlightEndTag = "</font>";
}

var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();

while (bodyText.length > 0) {
i = lcBodyText.indexOf(lcSearchTerm, i+1);
if (i < 0) {
newText += bodyText;
bodyText = "";
} else {
if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
bodyText = bodyText.substr(i + searchTerm.length);
lcBodyText = bodyText.toLowerCase();
i = -1;
}
}
}
}

return newText;
}

function highlightSearchTerms(controlId, searchText, treatAsPhrase, highlightStartTag, highlightEndTag)
{
if (treatAsPhrase) {
searchArray = [searchText];
} else {
searchArray = searchText.split(" ");
}

var theGrid = document.getElementById(controlId);

if (!theGrid || typeof(theGrid.innerHTML) == "undefined")
{ return false; }

var bodyText = theGrid.innerHTML;

for (var i = 0; i < searchArray.length; i++) {
bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
}

try
{
theGrid.innerHTML = bodyText;
}
catch(err)
{}

return true;
}

II. Include the js file in the aspx page where's the GridView (which rows you want to highlight), the aspx page should look like:

<script src="../script/THE_JAVASCRIPT_FILE.js" type="text/javascript"></script>

. . .

<asp:GridView ID="_YOUR_GRIDVIEW_ID" ....

III. Add code in Page_Load to fire the text highlighting after immediatelly after user loads the page:

protected void Page_Load(object sender, EventArgs e)
{

// modify that variable to containg all words for search separated by space:
string script, buffer = "word1 word2 word3";

. . .

script = "highlightSearchTerms('" + _YOUR_GRIDVIEW_ID.ClientID + "', '" + buffer + "', false, null, null); ";

ScriptManager.RegisterStartupScript(Page, GetType(), "highlight_text", script, true);

. . .

}

Note: In the example the javascript will higlight only text of the GridView, if some of the search word exist in other part of the page (out of the GridView), it won't be highlighted

Note: To modify the style of the highlighted word, just modify the code below(in the js file):

highlightStartTag = "<font style='color:blue; background-color:yellow;'>";

That's all. Happy coding :)