javascript - 搜索输入字段中的所有单词，然后替换 div 标签中的所有匹配单词

Question

$('#srctxt div').each(function() {
    var dari = $('#box').val();
    var text = $(this).text();
    $(this).html(text.replace(dari, '<b>'+dari+'</b>')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form method="POST">

<input type="text" id="box" value="love"> // working
<input type="text" id="box" value="love girl"> // not working

<div id="srctxt">
<div>i love you</div>
<div>love girl</div>
<div>not love</div>
<div>love love love</div>
</div>
</form>

我正在开发一个搜索网站，方法是将输入词的每个匹配词与搜索结果加粗。

如果只输入一个单词，比如单词love，那么这个脚本就可以很好地工作。但如果使用两个或更多单词，则此脚本无法正常工作。

例如单词love girl，然后只有一行的结果是粗体。但它都包含爱这个词，所以这对我来说是个问题。

对不起，如果我的英语有点难以理解。但是，我正在征求有关此 jQuery 代码修复的建议。谢谢...

Answer 1

您可以使用正则表达式轻松地做到这一点

步骤如下:

第 1 步。拆分输入值以生成输入词数组。

第 2 步。 遍历要执行搜索/替换条件的所有 div

第 3 步。 为每个 输入数组中的单词 创建一个 searchregexp 并在找到时替换

if ($('#box').val().length !== 0) {
   var dari = $('#box').val().split(' ');
   $('#srctxt div').each(function() {
       dari.map(item => {
         var regex = new RegExp('(' + item + ')(?!>|b>)', 'gi');
         $(this).html($(this).html().replace(regex, "<b>$1</b>"));
          });       
      });
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="box" value="love girl b"> 

<div id="srctxt">
<div>i love you</div>
<div>love girl</div>
<div>not love</div>
<div>love love love</div>
</div>

我还删除了具有相同 id 的重复输入字段，因为它是无效的 html。