Click here to Skip to main content
14,774,516 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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();
                alert(result);


        $('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;
                    aindx[aindx.length]=a.indexOf(result)+aindx[prev];
                    $(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

                a=b;
            }


                    });



            } catch (ex) { e.preventDefault(); }
        });

    });

</script>
Posted
Comments
enhzflep 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;
}
   
Good point. I think, with any thinkable state of affairs, using not HTML predefined tag makes no sense at all.
--SA
Peter_in_2780 4-Oct-12 1:30am
   
Why not use <span> insted of <mark> ?

1 solution

<mark>
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.
   
v2

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