Highlight search terms with jQuery
Overview
Highlight words and phrases within specified elements on the page. Search syntax is trimmed or eradicated, stopwords and words less than 3 characters are ignored.
Ingredients
You will need:
- jquery 1.3.2
- jquery Query Object plugin
- highlighting methods below
1:
2: /*
3: methods to help highlight search words and terms
4: depends on jquery
5: Peter Tyrrell, August 2009
6: */
7:
8: //
9: var highlightTermsIn = function(jQueryElements, terms) {
10: var wrapper = ">$1<b style='font-weight:normal;color:#000;background-color:rgb(255,255,102)'>$2</b>$3<";
11: for (var i = 0; i < terms.length; i++) {
12: var regex = new RegExp(">([^<]*)?("+terms[i]+")([^>]*)?<","ig");
13: jQueryElements.each(function(i) {
14: $(this).html($(this).html().replace(regex, wrapper));
15: });
16: };
17: }
18:
19: // returns array of unique search terms (words, phrases) found in value
20: var parseSearchTerms = function(value) {
21:
22: // split string on spaces and respect double quoted phrases
23: var splitRegex = /(\u0022[^\u0022]*\u0022)|([^\u0022\s]+(\s|$))/g;
24: var rawTerms = value.match(splitRegex);
25:
26: var terms = [];
27: for (var i = 0; i < rawTerms.length; i++) {
28:
29: // trim whitespace, quotes, apostrophes and query syntax special chars
30: var term = rawTerms[i].replace(/^[\s\u0022\u0027+-][\s\u0022\u0027+-]*/, '').replace(/[\s*~\u0022\u0027][\s*~\u0022\u0027]*$/, '').toLowerCase();
31:
32: // ignore if <= 2 chars
33: if (term.length <= 2) {
34: continue;
35: }
36:
37: // ignore stopwords
38: var stopwords = ["about","are","from","how","that","the","this","was","what","when","where","who","will","with","the"];
39: var isStopword = false;
40: for (var j = 0; j < stopwords.length; j++) {
41: if (term == stopwords[j]) {
42: isStopword = true;
43: break;
44: }
45: }
46: if (isStopword === true) {
47: continue;
48: }
49:
50: // add term to term list
51: terms[terms.length] = term;
52: }
53: return terms;
54: }
Example 1
Pass an array of terms to be highlighted in jquery-selected elements:
1: <script type="text/javascript">
2: $(document).ready(function() {
3: var searchTerms = ["banana", "monkey"];
4: // highlight valid terms in search results
5: highlightTermsIn($("#HighlightWrapper"), searchTerms);
6: });
7: </script>
Example 2
Parse raw search input to strip out stopwords, query syntax characters, and wee short words less than 3 characters that do nobody any good. Quoted phrases are treated as a single term.
1: <script type="text/javascript">
2: var rawSearch = "give the banana* to a monkey";
3: var termsToHighlight = parseSearchTerms(rawSearch);
4: // termsToHighlight now = ["give", "banana", "monkey"]
5: </script>
Example 3
Put it all together to retrieve raw search input from the query string, parse out terms to highlight, and highlight within specified containers.
1: <script type="text/javascript">
2: $(document).ready(function() {
3: // get quick search value from query string
4: var quickSearch = $.query.get("q");
5: // highlight valid terms in divs marked class="HighlightWrapper"
6: highlightTermsIn($("div.HighlightWrapper"), parseSearchTerms(quickSearch));
7: });
8: </script>
Acknowledgements
- Original concept: http://eriwen.com/javascript/highlight-search-results-with-js/.
- Use of <b> tags with inline style as highlight wrappers: Google cache pages.
- List of English stopwords: http://www.ranks.nl/resources/stopwords.html.
- First use: ARC-BC (Accessible Resource Centre British Columbia), http://www.arc-bc.org.