Highlight the search text

Question

0.00/5 (No votes)

See more:

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 14-Apr-15 21:44pm

Mahatma Aladdin

Updated 14-Apr-15 22:11pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2015-04-15T01:19:00

Solution 1

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);

Posted 15-Apr-15 1:19am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 15-Apr-15 1:21am

v3

Comments

Mahatma Aladdin 16-Apr-15 3:43am

tried this. the link works fine. but it doesn't highlight any word.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 16-Apr-15 5:34am

What is used to highlight?

Mahatma Aladdin 17-Apr-15 0:20am

i am using mark tag

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 17-Apr-15 2:27am

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.