regExp不区分大小写的单词边界

Question

由于某种原因， gi修饰符表现为区分大小写。 不知道发生了什么，但是也许有人知道为什么会这样。 情况相同时效果很好。 这个JSFiddle将演示我的问题。 下面的代码。 谢谢。

javaScript：

var search_value = $('#search').val();
var search_regexp = new RegExp(search_value, "gi");

  $('.searchable').each(function(){
   var newText =(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
  $(this).html(newText);

});

HTML：

<input id = "search" value = "Red">
<div class = "searchable">this should be red</div>
<div class = "searchable">this should be Red</div>

Answer 1

正确的代码是

    var search_value = $('#search').val();
    var search_regexp = new RegExp(search_value, "gi");

    $('.searchable').each(function(){
        //  var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");
        var newText =$(this).html().replace(search_regexp, function(matchRes) {
        return "<span class = 'highlight'>" + matchRes + "</span>";
        });

        $(this).html(newText);

    });

输出

小提琴

您的代码有问题：-

首先 ： search_regexp您在代码中的任何地方都没有使用过search_regexp

您的密码

 var newText =$(this).html().replace(search_value, "<span class = 'highlight'>" + search_value + "</span>");

其次，您正在使用search_value进行替换。 更换后，它将使Red和red变为Red或red 。

例如：如果search_value是Red那么您的输出将是

this should be Red
this should be Red

您应该使用匹配的结果而不是search_value

第三 ：如何使用带有替换功能的RegExp ？

正确的方法是

var newText =$(this).html().replace(search_regexp, function(matchRes) {
    return "<span class = 'highlight'>" + matchRes + "</span>";
});

说明

replace(<RegEx>, handler)

Answer 2

您的代码不是在replace调用中使用正则表达式，而只是在使用search_value 。 此JSBin显示您的代码工作情况： http : //jsbin.com/toquz/1/

您是否真的要用值替换匹配项（在此示例中将小写实例更改为大写）？ 使用$ .html（）还将为您提供该元素内的任何标记，因此也请记住这一点（以防在.searchable元素中与文本一起使用标记。

可能更容易做到：

function highlight(term) {
  var search_regexp = new RegExp(term, "gi");

  $('.searchable').each(function(){
    if (search_regexp.test($(this).html())) {
      var highlighted = $(this).html().replace(search_regexp, function(m) {
        return '<span class="highlight">'+m+'</span>';
      });
      $(this).html(highlighted);  
    }
  });
}

您在JSBin中的原始代码是highlightReplace()函数。