Question

我正在尝试编写一些代码，这些代码将匹配输入到文本输入中的单词与div中的单词“searchable”并突出显示这些单词。如果一个或多个单词匹配并且没有不匹配的单词，我现在可以使用的是什么。例如，如果可搜索的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 );
});

与javascript匹配的单词函数

1 个答案: