Click here to Skip to main content
15,040,003 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a javascript like:
XML
<script type="text/javascript">
        function getHighlight() {
            var MainText = '';
            var toSearch = 'store';
            MainText = MainText + '<table>';
            MainText = MainText + '<tr><td><b>Stores</b></td></tr>';
            MainText = MainText + '<tr><td class="clsUrl"><a href="check%20Store%20quality.aspx" style="color:blue; text-decoration:none;" target="_blank">check%20Store%20quality.aspx</a></td></tr>';
            MainText = MainText + '<tr><td><p>Some Description about store...</p><br /></td></tr>';
            MainText = MainText + '</table>';
            $('.dv_searchResult').append(MainText);
            textHightLight($(".dv_searchResult").html(), toSearch, ".dv_searchResult");
       }

    function textHightLight(totText, term, dvCls) {
        var src_str = totText;
        var childNodes = document.body.childNodes;
        term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("(" + term + ")", "gi");

        src_str = src_str.replace(pattern, "<mark>$1</mark>");
        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

        $(dvCls).html(src_str);
    }
        </script>


XML
Here I am binding the complete html into a div dv_searchResult and then highlighting the toSearch text inside the div. Its working fine to an extent. The only problem is that if the toSearch text contains any word which exists also in url (eg, in the above text, store exists inside href="/KB/answers/check%20Store%20quality.aspx" also.),then the url is also replaced with <mark></mark> that i am using to highlight the word. I need help on how can I ignore the clsUrl class or the <a href=""> tag while reading the text in textHightLight function.

Kindly help.


See the example here: fiddle Example
Posted
Updated 14-Apr-15 22:11pm
v2

1 solution

Change these below lines...
JavaScript
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");
 
$(dvCls).html(src_str);

to...
JavaScript
var new_str = src_str.replace(pattern, "<mark>$1</mark>");
new_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");
 
$(dvCls).html(new_str);
   
v3
Comments
Mahatma Aladdin 16-Apr-15 3:43am
   
tried this. the link works fine. but it doesn't highlight any word.
   
What is used to highlight?
Mahatma Aladdin 17-Apr-15 0:20am
   
i am using mark tag
   
Yeah, that is because you are replacing the whole HTML with a pattern. Send only that part of text, which needs to be highlighted to the function textHightLight. Don't send whole HTML of the div.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900