Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
I am using javascript to highlight text in markup. I can successfully change the markup, as seen in the browser developer tool (chrome), but rendered code as appears in browser window does not change. Does anyone see what i am doing wrong?
<script type="text/javascript">
    $(document).ready(function (e) {
        $('#submit').click(function (e) {
            try {
                var $inputTxt = $('#search');
                result = $inputTxt.val();

        $('p').each(function () {
            var a=$(this).html().toString();
            var aindx=[];
            while(a.indexOf(result) >= 0){
                //alert("string found "+a.indexOf(result)+" position");

                var b=a.substring((a.indexOf(result)+result.length));
                if(aindx.length > 0) {
                    var prev=aindx.length-1;
                    $(this).html(a.substring(0,(aindx[aindx.length]-1))+'<mark id="tmprry">'+result+'</mark>'+a.substring(aindx[aindx.length+result.length-1]));
                } else {
                    aindx[0] =a.indexOf(result);
                    $(this).html(a.substring(0,(aindx[0]-1))+'<mark id="tmprry">'+result+'</mark>'+a.substring(aindx[0]));
                //insert mark around position



            } catch (ex) { e.preventDefault(); }
Posted 3-Oct-12 15:35pm
enhzflep at 3-Oct-12 22:24pm
I see that you're using a tag, <mark/> - one I've not seen before. Some browsers used to disallow styling of non-standard elements, I've no idea on the current state of affairs. If the HTML is changing, but the display isn't - I'd look at the CSS to check the style of 'mark' elements. Even quicker, just add something like the following to your css: mark { background-color: yellow; }
Sergey Alexandrovich Kryukov at 3-Oct-12 22:34pm
Good point. I think, with any thinkable state of affairs, using not HTML predefined tag makes no sense at all. --SA
Peter_in_2780 at 4-Oct-12 1:30am
Why not use <span> insted of <mark> ?

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

is a standard HTLML5 tag used to highlight text.
The intention here was to insert the mark tag into the text to display the searched for text as highlighted.

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

  Print Answers RSS
Your Filters
0 Sergey Alexandrovich Kryukov 367
1 thatraja 220
2 OriginalGriff 205
3 Abhinav S 166
4 CPallini 160
0 Sergey Alexandrovich Kryukov 8,849
1 OriginalGriff 5,035
2 Peter Leow 3,949
3 Maciej Los 3,535
4 Abhinav S 3,148

Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 5 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid