{"id":284,"date":"2011-06-22T18:32:33","date_gmt":"2011-06-22T18:32:33","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=284"},"modified":"2011-06-22T18:32:33","modified_gmt":"2011-06-22T18:32:33","slug":"jquery-search-term-highlighting","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/jquery-search-term-highlighting\/","title":{"rendered":"jQuery search term highlighting"},"content":{"rendered":"

Highlighting keywords from a search can be done on the server-side, by using your development languages string replace functions, but this can add complexity to your code. This job is very well suited to client-side JavaScript. Using jQuery makes the job even easier.<\/p>\n

The ingredients:<\/p>\n

    \n
  1. A jQuery function to wrap and add a css class to the keywords within your content. The function described here works well: http:\/\/wpswitch.com\/blog\/wordpress\/how-to-highlight-search-terms-with-jquery\/<\/a><\/li>\n
  2. A function to grab the keyword from the url query string.<\/li>\n
  3. A little CSS to define how the highlighting will look.<\/li>\n<\/ol>\n

    Put it all together:<\/p>\n

    The jQuery<\/h3>\n

    \/\/ include function from step 1 above here
    \n\tfunction getParameterByName( name ) {
    \n\t  name = name.replace(\/[\\[]\/,"\\\\\\[").replace(\/[\\]]\/,"\\\\\\]");
    \n\t  var regexS = "[\\\\?&]"+name+"=([^&#]*)";
    \n\t  var regex = new RegExp( regexS );
    \n\t  var results = regex.exec( window.location.href );
    \n\t  if( results == null )
    \n\t    return "";
    \n\t  else
    \n\t    return decodeURIComponent(results[1].replace(\/\\+\/g, " "));
    \n\t}
    \n\tvar searchQuery = getParameterByName('query');
    \n\tif (searchQuery != '')
    \n\t    $('#content').highlight(searchQuery, 1, 'hls');
    \n\t<\/code><\/p>\n

     <\/p>\n

    The CSS<\/h3>\n

    .hls { padding: 0 4px; background: #ffa; } \/* highlight class *\/
    \n\th3 .hls { background: none; }
    \n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

    Highlighting keywords from a search can be done on the server-side, by using your development languages string replace functions, but this can add complexity to…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12,5],"tags":[86],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/284"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":285,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions\/285"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}