javascript - javascript 的匹配单词函数

Question

我正在尝试编写一些代码，将输入到文本输入中的单词与 div 中“可搜索”类的单词进行匹配，并突出显示这些单词。如果一个或多个单词匹配并且没有不匹配的单词，我现在所拥有的就有效。例如，如果可搜索的 div 具有短语:hello world，并且输入中为 hello world，它将突出显示两者。如果输入只有 hello，它会突出显示该单词。但如果输入有 hello mars，它不会突出显示单词 hello，因为 mars 不在字符串中。这个jsFiddle证明了这一点。任何想法都非常感激。这是代码。谢谢。

JavaScript:

if($('#search').val().length !== 0){

   $('.searchable').each(function(){

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

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

  });
}

html:

<input type = "text" id = "search" value = "hello mars">
<div class = "searchable">hello world</div>

Answer 1

类似这样的事情:

// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
String.prototype.pregQuote = function()
{
  return this.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};

var keyword = $("#search").val();
var searchRegex = new RegExp( '(' + keyword.pregQuote() + ')' , "ig" );

$('.searchable').each(function(){
  var html = $(this).html();
  html = html.replace( searchRegex , '<span class="highlight">$1</span>');
  $(this).html( html );
});