jquery .html() replace case sensitivity

Question

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?

If you want case-insensitive matching, you have to use a regular expression with the `i` modifier. String replacing is always case-sensitive. — Barmar, Nov 27 '13 at 18:11
Also note that jQuery's `:contains()` pseudo-selector is case-sensitive. — Barmar, Nov 27 '13 at 18:11
i have overridden the :contains selector by the following code: jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; — imran, Nov 27 '13 at 18:15
OK, although it would probably be better to add a new pseudo-selector `:icontains` instead of overriding the normal one. Anyway, my first comment still applies, use a regular expression to do a case-insensitive string replacement. — Barmar, Nov 27 '13 at 18:17
@Barmar can you show me an example or modify my code for the regexp, since i am new to jquery — imran, Nov 27 '13 at 18:19

score 12 · Accepted Answer · answered Nov 27 '13 at 18:20

12

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

answered Nov 27 '13 at 18:20

kabomi

526
2
10

5

Unfortunately, If the word was Capitalised and the search term was lowercase, the search term will replace the capitalised occurrence with the lower case search term. – frazras May 20 '16 at 17:06

score 5 · Answer 2 · answered Jun 23 '17 at 18:46

Old question but a better answer would be:

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

The current top answer will change the capitalized letters to lower case. The extra parentheses in new Regexp() will store the value found. The $1 in .replace() inserts the stored value so character cases will be consistent.

adeneo · Answer 3 · 2013-11-27T18:24:49.023

$("#search_button").on('click', function(e){
    e.preventDefault();

    var keyword = $("#searchkeyword").val().toLowerCase(),
        paras   = $('p').filter(function() {
                     return $(this).text().toLowerCase().indexOf(keyword) != -1;
        }).html(function(_, html) {
            var reg = new RegExp('(' + keyword + ')', 'gi');
            return html.replace(reg, "<span class='red'>$1</span>");
        });

    $('#search_results').html(paras);
});

FIDDLE

Note that you're moving (not copying) the paragraphs into the #search_result element, and on the next search overwriting them, and they won't magically return, they gone !

score 0 · Answer 4 · answered Nov 27 '13 at 18:19

0

Probably what you want is a replace using case insensitive, like this:

msg = 'This is a Case Sensitive message';
msg.replace(/case/gi, "case");
"This is a case Sensitive message"

More here: http://www.w3schools.com/jsref/jsref_replace.asp

answered Nov 27 '13 at 18:19

Vinicius Lima

169
2
7

score 0 · Answer 5 · edited May 23 '17 at 12:24

0

You could use a regular expression. I'm not good at constructing regExps, though. check this out, it might help.

By the way, the method 'replace' is native of javascript, not jquery

edited May 23 '17 at 12:24

Community

1
1

answered Nov 27 '13 at 18:20

sebastianb

13
10

jquery .html() replace case sensitivity

5 Answers5