CODEWITHSUNDEEP
jqueryhtmlstringreplace
imran
imran

Reputation: 646

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?

Upvotes: 2

Views: 10031

Answers (6)

Umer Hassan
Umer Hassan

Reputation: 1

I faced the same problem of case changing, so I found a workaround by doing the following.

const originalText = "Your HTML";
const replacementText = "html"

// To keep original case
const originalString = originalText.toLowerCase();
const subString = replacementText.toLowerCase();
const index = originalString.indexOf(subString);

replacementText = originalText.substring(index, index + replacementText.length);

originalText.replace(new RegExp(replacementText, "ig"), '<i>' + replacementText + '</i>');

Upvotes: 0

Howard
Howard

Reputation: 3758

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.

Upvotes: 5

adeneo
adeneo

Reputation: 318372

$("#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 !

Upvotes: 1

sebastianb
sebastianb

Reputation: 13

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

Upvotes: 0

kabomi
kabomi

Reputation: 526

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

Upvotes: 12

Vinicius Lima
Vinicius Lima

Reputation: 169

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

Upvotes: 0

Related Questions