与 javascript 匹配的单词函数答案

【问题标题】：a matching word function with javascript与 javascript 匹配的单词函数
【发布时间】：2014-07-01 15:59:21
【问题描述】：

我正在尝试编写一些代码，将输入到文本输入中的单词与具有“可搜索”类的 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>

【问题讨论】：

标签： javascript jquery html regex

【解决方案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 );
});

【讨论】：