Case insensitive word search wrap it in between

Question

I made a small script designed to find a string and wrap it in between. The string is stored in a variable.

HTML

<h2>I have a lot of friends.</h2> <h2>My best friend name is Mike.</h2> <h2>My best friend website is <a href="http://www.myfriendmike.com">myfriendmike.com</a>.</h2> 

jQuery

 var term = "friend"; var item = $("h2"); $(item).each(function() { var itemHTML = $(this).html(); var newItemHTML = itemHTML.replace(term, '<span class="highlight">' + term + '</span>'); $(this).html(newItemHTML); }); 

That's the whole thing: http://jsfiddle.net/97hxbyy0/

script successfully replaces friend with friend; but I want him to also replace Friend or FRIEND with a friend.

In other words, I want to do this and highlight case insensitive .

Thanks!

Answer 1

I think execution is a safer option, because you do not want to modify the contents of the anchor element

 if (!RegExp.escape) { RegExp.escape = function(value) { return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") }; } var term = "friend"; var regex = new RegExp('(' + RegExp.escape(term) + ')', 'ig'); var item = $("h2"); $(item).each(function() { $(this).contents().each(function() { if (this.nodeType == Node.TEXT_NODE && regex.test(this.nodeValue)) { $(this).replaceWith(this.nodeValue.replace(regex, '<span class="highlight">$1</span>')) } }) }); 

 .highlight { background: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2>I have a lot of friends.</h2> <h2>My best friend name is Mike.</h2> <h2>My best Friend website is <a href="http://www.myfriendmike.com">myfriendmike.com</a>.</h2> <h2><a href="http://www.myfriendmike.com">myfriendmike.com</a> is my Friend website.</h2> 

Answer 2

Use case insensitive regular expression with option i

 var term = /friend/i; 

 var term = /friend/i; var replaceWith = "friend"; var item = $("h2"); $(item).each(function() { var itemHTML = $(this).html(); var newItemHTML = itemHTML.replace(term, '<span class="highlight">' + replaceWith + '</span>'); $(this).html(newItemHTML); }); 

 .highlight { background: red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2>I have a lot of friends.</h2> <h2>My best Friend name is Mike.</h2> <h2>My best FRIEND website is <a href="http://www.myfriendmike.com">myfriendmike.com</a>.</h2> 

Answer 3

Create a regular expression with the flag set, set for the case, and write the value in the callback to replace it with the correct case, etc.

 var term = "friend"; var item = $("h2"); var reg = new RegExp(term, "i"); item.html(function (i, html) { return html.replace(reg, function (match) { return '<span class="highlight">' + match + '</span>' }); }); 

Fiddle

Answer 4

Here is javascript to keep capitalizing on what you are replacing.

 var term = /friend/i; var item = $("h2"); $(item).each(function() { var itemHTML = $(this).html(); var newItemHTML = itemHTML.replace(term, '<span class="highlight">$&</span>'); $(this).html(newItemHTML); });