使用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);

    });

<强>输出

Fiddle

您的代码问题： -

首先：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()函数。