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>