Text highlighting in search results Jul22 '05

I’ve always been intrigued with search results that highlight, in the document, the search term(s) that were requested.

Google does this, and I’m sure many other search engines do it, as well.

To be exact, Google bolds the search terms within the document, rather than highlight, but the point is the same:

Notice the bold text matches the search request that was made.

I’ve been wondering how that is done from a programming standpoint.

The bold or highlight part is probably just a <span> element wrapped around each relevant word (search term), with CSS applied to make those words appear bold or highlighted.

The hard part is finding those relevant words, before the page loads, and then replacing instances of those words with <span> elements wrapped around them.

For example, let’s say I am searching Google for php str_replace. When the browser spits up the HTML page, every instance of php str_replace should have <span> elements wrapped around it, like this:

<span>php str_replace</span>

Conversion occurs before HTML output

This conversion... or "find/replace," if you want to call it that - has to happen prior to the HTML being spit out.

PHP, which stands for Hypertext PreProcessor, seems to be suited fine for such a task. The "Pre" in PreProcessor means that before any HTML is output (which the browser then renders), programming instructions can occur.

The programming instruction we want to occur is a "find/replace" for the search terms.

PHP str_replace function

As if I haven’t alluded to it enough, PHP has a function called str_replace, which is suitable for finding instances of the search terms, and replacing them with the same word, but with <span> elements wrapped around them.

With PHP, all we’d have to do is use str_replace as we output the content:

str_replace( $search_term, "<span>".$search_term."</span>", $search_results )

$search_term is a variable containing the requested search term(s) that the user submitted. $search_results contains the specific row of data that we want to output from the database.

So, a search for the terms, php str_replace, would look like this:

str_replace( "php str_replace", "<span>php str_replace</span>", $search_results )

Every instance of php str_replace is converted to <span>php str_replace</span>, within the body of $search_results.

CSS for bold and highlight

And, your CSS set up to style that particular <span>, could look something like this:

span
{
background: #ffc;
font-weight: bold;
}

Here we’ve made the text bold, and the background a light yellow (#ffc), to achieve the "highlight" effect.

Cautions and caveats

This approach works great, but there are a couple of things to take into consideration:

1. str_replace is case sensitive, so it won’t find different variations of the same word. We want it to find all variations of the word. For example, php is the same thing as PHP.
2. In the example above, we use multiple words as our search request. str_replace only finds and highlights any instances of the entire string. So, it will easily find all instances of php str_replace, but not instances of php, on it’s own - or str_replace, on it’s own.

So, these things have to be incorporated into the processing, so the results behave as such:

1. No matter what the text case is of the search requests, every instance of those words must be bold and highlighted.
2. Bold and highlight every instance of the entire search term, and if the search term contains multiple words, each word, separately, has to be bold and highlighted as well.

Up to you, dear reader

I am going to leave the solution to these two issues up to the readers. If you are familiar with PHP, and want to take a stab at these issues, please post feedback.

It’d be interesting to see different ways to come to a solution.

Categories: PHP , Search , Tutorials

Add Feedback (view all)