Reputation: 646
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
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
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
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);
});
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
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
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
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