不区分大小写的单词将其环绕起来

Question

我制作了一个小脚本，旨在查找字符串并将其包装在一个范围内。 字符串存储在变量中。

HTML

 <h2>I have a lot of friends.</h2>
 <h2>My best friend's name is Mike.</h2>
 <h2>My best friend's 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);
});

这是全部内容： http : //jsfiddle.net/97hxbyy0/

脚本成功地将好友替换为好友 ； 但我希望它也与朋友代替朋友或朋友 。

换句话说，我希望使该查找和突出显示不区分大小写 。

谢谢！

Answer 1

将不区分大小写的正则表达式与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's name is Mike.</h2> <h2>My best FRIEND's website is <a href="http://www.myfriendmike.com">myfriendmike.com</a>.</h2> 

Answer 2

我认为这样做是更安全的选择，因为您不想更改anchor元素的内容

 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's name is Mike.</h2> <h2>My best Friend's 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's website.</h2> 

Answer 3

创建一个设置了区分大小写标志的正则表达式，并在回调中捕获值以替换为正确的大小写等

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>'
    });
});

小提琴

Answer 4

这是保留所要替换内容的大写形式的JavaScript。

 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); });