jQuery搜索div以查找文本并在其周围放置<b>

Question

在Twig中，我有一个搜索表单，该表单在博客项目中进行了搜索，一切正常，但是我希望找到搜索查询{{ query }}并将其替换为<b>{{ query }}</b>，以便获得搜索结果更好看。

为此，我尝试了以下操作：

$("body").html().replace(/{{ query }}/g, '<b>{{ query }}</b>'));

但是我无法使它正常工作，没有任何变化，也没有收到错误消息。

如何使用jQuery选择搜索查询并在其周围放置<b>标签？

Answer 1

您需要重新设置。 .replace()仅返回更改后的文本。

$(function () {
  $("body").html($("body").html().replace(/{{ query }}/g, '<b>{{ query }}</b>'));
});

此外，删除双))。应该是单身。另外，我建议使用通配符替换。

$(function() {
  $("body").html($("body").html().replace(/\{\{ query \}\}/g, "<b>$&</b>"));
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<p>Hello {{ query }}</p>
<p>{{ query }} is great!</p>

Answer 2

因为您没有将替换的html插入文档中。您需要在文档中插入新的html。

$("body").html(function(i, h){
    return h.replace(/{{ query }}/g, '<b>{{ query }}</b>');
});

或

$("body").html(function(i, h){
    return h.replace(/({{ query }})/g, '<b>$1</b>');
});

$("body").html(function(i, h){
    return h.replace(/{{ query }}/g, '<b>{{ query }}</b>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>{{ query }}</div>
<p>{{ query }}</p>