is there a way to use javascript or jquery to add a color to the search keyword

Question

the url is like this:

http://www.example.com/index.php?main_page=advanced_search_result&keyword=Sons+of+Anarchy

on the above the search keyword is Sons of Anarchy. now, is there a way to add a color to the keyword when in the search result content with js on the search result page . thank you.

ps:the search input box:<input type="text" class="keybg" id="keyword" name="keyword">

$sData['pfrom'] =    (isset($_GET['pfrom']) ? zen_output_string($_GET['pfrom']) : '');
  $sData['pto'] =      (isset($_GET['pto'])   ? zen_output_string($_GET['pto']) : '');

the above way is added a parameter to the url.

http://www.example.com/index.php?main_page=advanced_search_result&keyword=Sons+of+Anarchy&pfrom=...pto=..

wait, my answer didn't exactly answer your question. let me revise it :) — Ryan, Oct 24 '11 at 02:22
can you show the code where you're processing the response from the server? — Ryan, Oct 24 '11 at 02:35
alright, I have a good idea of how to help you now. I just need to clear up a few things: 1.) when the user gets the search results, are you wanting to load a new page with the search results and keyword colored, or are you just returning text to put back in the page you are currently on? 2.) what do `pfrom` and `pto` mean in the context of your program? 3.) what methodology are you using to send the url with keyword to the server? — Ryan, Oct 24 '11 at 05:17
1, the searched result shows on another page. 2,the returning text which contains the searched keyword colored. 3,i only make an example. 4, GET — runeveryday, Oct 24 '11 at 05:31
I have now updated my answer. It assumes you are using jQuery. — Ryan, Oct 24 '11 at 05:51

Ryan · Answer 1 · 2011-10-24T05:56:32.403

Try this (this assumes you are loading jQuery into the page):

myFile.php
==========

    <?php
        $sData['pfrom'] = (isset($_GET['pfrom']) 
            ? zen_output_string($_GET['pfrom']) 
            : '');
        $sData['pto'] = (isset($_GET['pto']) 
            ? zen_output_string($_GET['pto'])
            : '');
        // ... your other code here
    ?>

    <!-- PUT THIS SCRIPT AT THE END OF YOUR HTML BODY ELEMENT -->
    <script type="text/javascript">
        // get the current URL
        var url = window.location.toString();

        //get the parameters
        url.match(/\?(.+)$/);
        var params = RegExp.$1;

        // split up the query string and store in an
        // associative array
        var params = params.split("&");
        var queryStringList = {};
        for (var i=0;i<params.length;i++) {
            var tmp = params[i].split("=");
            queryStringList[tmp[0]] = unescape(tmp[1]);
        }

        // get the body html and update it to have keyword colored
        var searchKeyword = queryStringList.keyword;
        var searchRegex = new Regexp('/'+searchKeyword+'/', 'gi');
        var html = $('body').html();
        var coloredHTML = html
                      .replace(searchRegex, 
                      "<span style="color:green">"+html+"</span>");
        $('body').html(coloredHTML);
    </script>

score 1 · Answer 2 · answered Oct 24 '11 at 02:20

1

You could do something like this:

document.body.innerHTML = document.body.innerHTML.replace(/Anarchy/ig, '<mark>Anarchy</mark>');

answered Oct 24 '11 at 02:20

Jack

9,448
3
29
33

i am sorry, i don't know how to use you code. if the :the search input box: how do i do? thank you – runeveryday Oct 24 '11 at 03:38

Liangliang Zheng · Answer 3 · 2011-10-24T11:53:41.097

I think what you want is something like this.

The solution will not mess up your html if you are searching for something that is probably inside html tags, e.g., span
The search key will be escaped in order to generate a correct reg exp object

code:

var searchKey = 'rray($';
highlight(searchKey, $('div'));

searchKey = '|| !';
highlight(searchKey, $('div'));

function highlight(word, $target){
    var conts = $target.html().split('<').join('><').split('>');

    var escapeRgx = /([\/\.\*\+\?\|\(\)\[\]\{\}\\\:\$\^])/g;
    var searchRgx = new RegExp(word.replace(escapeRgx, '\\$1'), 'gi');

    $.each(conts, function(idx, str){
        if(str.charAt(0) != '<'){
            conts[idx] = str.replace(searchRgx, '<span class="mark">' + word + '</span>') ;
        } else {
            conts[idx] = str + '>';
        }
    });

    $target.html(conts.join(''));
}

For getting the search key, you can retrieve it at the backend, and echo it to the frontend. i.e.,

<? echo 'var searchKey = "'. $_GET['key'] .'"'; ?>

Here is the demo - http://jsfiddle.net/jn7TC/4/

is there a way to use javascript or jquery to add a color to the search keyword

3 Answers3