与javascript匹配的单词函数

a matching word function with javascript

本文关键字：单词 函数 javascript      更新时间：2023-09-26

我正试图编写一些代码，将匹配键入与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>

像这样:

// 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 );
});
相关文章：