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

时间:2018-09-27 13:26:03

标签: jquery replace

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

为此,我尝试了以下操作:

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

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

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

因为您没有将替换的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>