2 

$('#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>

我正在通过将输入单词的每个匹配单词与搜索结果加粗来开发搜索站点。

如果只输入了一个单词，比如 word love，那么这个脚本就可以很好地工作。但是如果使用两个或更多的词，那么这个脚本就不能正常工作。

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

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

4

3 回答 3

0

您可以使用正则表达式轻松完成此操作

以下是步骤：

步骤1。拆分input value以制作array of input words.

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

步骤 3。对于每个word in input array创建一个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。

于 2018-07-16T07:49:08.737 回答
0

也许您必须进行split搜索查询，例如： 'love girl'.split(' '); // ---> ['love','girl']; 并对结果数组执行 aforEach并将每个数组的行为与您的dari变量一样。请注意，即使您的单词是一个单词（例如“love”），结果 ofsplit仍然是一个数组。所以你不需要将你的逻辑分成两个分支。

于 2018-07-16T06:45:17.463 回答
0

我认为您将不得不在搜索字段中遍历您的文本。假设没有输入特殊字符（-、{、}、> 等），您可以执行以下操作

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

让我知道这是否有帮助。

于 2018-07-16T06:44:43.380 回答