Jquery поиск div для текста и поместите <b>вокруг него

Question

В Twig у меня есть поисковая форма для поиска в элементах блога, все это прекрасно работает, но я хочу, чтобы поисковый запрос {{ query }} был найден и заменен на <b>{{ query }}</b>, чтобы мои результаты поиска выглядели лучше.

Для этого я попробовал следующее:

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

Но я не смог заставить это работать, ничего не изменилось, и я не получил сообщение об ошибке.

Как я могу использовать jQuery, чтобы выбрать свой поисковый запрос и поставить вокруг него <b> теги?

Answer 1

Поскольку вы не вставили замененный 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>

Answer 2

Вам нужно установить его снова..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>