Home/ Questions/Q 8284399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T11:05:30+00:00

Im using this jquery plugin for searching text : http://code.google.com/p/jquery-highlight/downloads/list .. But im not

  • 0

Im using this jquery plugin for searching text :”http://code.google.com/p/jquery-highlight/downloads/list “..

But im not able to wrap this code in angular js ,
I mean to say “i’m unable to write a directive to call this jquery plug in”…!!!

Updated :

Same post in Google group:

This is the group

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    UPDATE: This is just an example. You can modify as per your needs.

    You don’t need RegExp comparison for that.
    Lets make simple use of javascript’s split() function

    1) Define a style for highlighting.

    .srchslctn{
    background-color: yellowgreen;
    color: red;
}

    2) Your sample HTML

    <body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>

    3) JavaScript

                $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }

    Thats it….

    Explanation -: split() will break the targetString according to your searchString. This is similar to how we retrieve comma separated values. Only thing is in this case your search string acts like comma 🙂

    Then keep arr[0] as it is.
    Highlight your search string and append it to arr[0].
    Append arr[1] to above result and so on.

    Simple….

    Searched text as in you have to only highlight the matched part keeping rest of the text as it is?

    • 0