Discuss: Enhance Usability by Highlighting Search Terms
by Brian Suda, Matt Riggott
- Editorial Comments
13 Javascript and Toggling
I agree that a clientside scripted solution would be far better, and easier to implement, in that you don’t have to go dabbling with every bit of text that’s output in a serverside script.
For semantics, it’d be good to have said script run through the text, and wrap the highlighted terms in <strong class=“highlight”> elements, as well as dynamically adding a stylesheet with (ideally) something like:
strong.highlight {font-weight:inherit}
strong.highlight:contains(keyword1) { background:#8FF }
strong.highlight:contains(keyword2) { background:#FF0 }
-or more realistically than ideally, using a different classname for each highlighted term.
Using :contains would complicate things anyway, in that you’d have to make sure that the rule for :contains(cat) comes before the one for :contains(category).
posted at 07:06 pm on August 11, 2004 by Simon F. P. Murray
14 Response from the authors
Thanks for the comments so far; we’ll take them on board for future releases of the script. Here’s our considered response to some of the questions and criticisms so far:
“Why not just make the text a different colour rather than highlighting it?”
That’s up to you and your style sheets. The keyword highlighter may be better described as keyword tagger; it surrounds the words the visitor searched for with a span tag that has a special class. You can use this class to highlight the words anyway you want with CSS (without needing to touch the PHP code at all). Whether that is by changing the colour of the text or adding verbal stress to the word for screen readers is up to you. You may even want to change the use of the span element to that of strong or em for a more semantic value; it is your decision.
“How about doing this with Javascript”
You could implement this in Javascript (as some have done) or any client-side technology. While we have no qualms about doing this, we decided a server-side method held more benefits. For example, you can guarantee that all user-agents will receive the same output on the server-side, something you cannot say about a client-side script (e.g. clients with no understanding of Javascript will not highlight anything). You can also augment the server-side script in ways you couldn’t client-side, such as integrating it with a site-wide search as we mention in the article.
“Using Javascript allows you to disable the highlighting without an extra trip to the server”
Let’s polarise this: instead of using Javascript to highlight the search terms, why not continue to highlight server-side, and add Javascript to the page to allow the added span elements to be removed from the DOM? That would remove the need to make a request to the server, without the main functionality relying on client-side code. Another way would be to add an alternative stylesheet that turns off the highlighting.
“Your regular expressions for parsing the HTML are naive”
Implementing a full SGML/XML parser was well beyond the scope of our project, although it may be a good idea for a future version. The main focus of the project was on usability and allowing users to find the information they want faster.
“One additional problem is a search utilising inclusive or exclusive syntax (’+’ or ‘-’)”
We hadn’t thought about this, so thanks for pointing it out. If a user searches for “food -dog”, the highlighting function would try to highlight the words “food” and “-dog”, rather than “dog”. We’ll put in the to-do list and fix it as soon as we can.
“Searching for <! breaks the highlighting function”
Good catch! We missed that one, but it’s been fixed in version 1.8.1 (available from http://suda.co.uk/projects/SEHL/). The problem was that while the special HTML characters were being properly escaped when being searched for, they weren’t when being displayed in the little advisory at the top of the page. So the highlighter was never broken, but the advisory note at the top was.
“Why not use Firefox’s find-in-page feature instead?”
You can, but you can only search for one word or phrase at a time. The highlighting function is available to any visitor without extra effort on their part, and it shows any number of distinct phrases on the page simultaneously.
“Wouldn’t doing it server side have odd results if a browser is using a proxy?”
If we understand you correctly the implication here is that the referring URL would be removed by the proxy; thus nothing will be highlighted, the user is none the wiser, and the system degrades gracefully. Can anyone think of any other problems with a client behind a proxy?
On a final note, we hope you see our code as a seed for future ideas, to allow you to think about how best to provide information to web users, to do more than just provide static information. Remember, our code is released under the GPL, so please feel free to take it, fork it, and make it better! If you have any more comments please let us know. Cheers!
posted at 03:11 pm on August 12, 2004 by Brian and Matt
15 Good script
Overall, the script is good, but v1.8.1 still spoils our <!— comments containing other HTML tags :(
I’ve sent you an e-mail about the subject.
Cheers!
posted at 01:38 am on August 13, 2004 by Marcin Brzezinski
16 another option
[url=“http://www.hotscripts.com/Detailed/21112.html”]PHP Highlighter[/url] (http://www.hotscripts.com/Detailed/21112.html) is another alternative. I recently implemented it in [url=“http://coda.co.za/search/test”]my own site[/url] search engine without much hassle.
posted at 09:18 am on August 14, 2004 by coda
17 Umm?
resumé seems to break it. This word was on the test search site, but it just highlights the whole thing!
Says up the top “Why is resum鼯span> highlighted? “posted at 12:42 am on August 19, 2004 by Snik
18 Using Apache filters
Instead of using auto_prepend php file you can achieve the same thing with Apache 2.0 output filters, and this way you can add search term highlighting to static html files also.
You need to have mod_ext_filter loaded, and then use this in server level config:
ExtFilterDefine highlight-search-terms cmd=”/path/to/php /path/to/highlight_search_terms.php”
And use this directive in <Location> <Directory> or <Files> block depending on where you want this filter to apply:
SetOutputFilter highlight-search-terms
The highlighting script (be it PHP, Python or whatever) should read from stdin, do its thing and output to stdout.
posted at 07:23 am on August 22, 2004 by Erki Esken
20 Implemented here.
http://tranchant.plus.com/notes/sehl
I’ve made a couple of modifications to fit in with my dynamic generation from template files and database content; and to cope with my caching strategy. See the above URL for details.
posted at 04:34 am on September 10, 2004 by Mark Tranchant
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
11 Not to be a detractor or anything...
…but it does seem that using Javascript would be more appropriate. Wouldn’t doing it server side have odd results if a browser is using a proxy?
posted at 02:16 am on August 11, 2004 by Brendan Taylor