Search code examples
jqueryhtmlstringreplace

jquery .html() replace case sensitivity

i am trying to build a string search by using Jquery. My page contains number of paragraph tags which contains text. My code is as below:

$("#search_button").click(function(event){
var keyword = $("#searchkeyword").val();
var paras = $("p:contains('" + keyword + "')").each(function(){
$(this).html(
$(this).html().replace( keyword ,'<span style=color:red>  "' + keyword + '" </span>')
);
});
$('#search_results').html(paras);
event.preventDefault();
});

The search works fine . I am having problem with html.replace() which is only replacing the exact case matching words. Suppose i search for word "apple", html.replace() will only replace the string if the text contains exactly the word "apple" but if i search for "Apple", the search still works but in that case html.replace() does not works since the string contains word "apple" not "Apple". how can i remove case sensitivity of html.repalce in my code?

Solution

  • thats easy with regular expressions, try change this line:

    $(this).html().replace( keyword ,'<span style=color:red>  "' + keyword + '" </span>')

    for this one:

    $(this).html().replace( new RegExp(keyword, "ig") ,'<span style=color:red>  "' + keyword + '" </span>')

    In the RegExp the "i" parameter will do the trick and the "g" will repeat the replace again if it finds more than one coincidence of keyword in the string produced by $(this).html()