На сайте есть текст, например такой и он может встречаться несколько раз: %%text%%
Как при помощи JavaSrcipt/jQuery заменить ВСЕ вхождения этого текста на:
<span class="class_name"></span>
-
использовать замену по регулярному выражению – teran 23 ноя '17 в 10:22
-
teran, регулярные выражения для меня темный лес. буду благодарен за кусок кода – Evgeny 23 ноя '17 в 11:04
-
Ты хотя бы html выложи... – Air 23 ноя '17 в 11:05
3 ответа
Получите элемент, в котором может встречаться подобный шаблон (в примере я взял body
целиком), после чего обратитесь к свойству innerHTML
, чтобы получить содержимое тега, потом при помощи замены по регулярному выражению замените все вхождения %%text%%
на другую подстроку:
var source = document.body.innerHTML;
var changed = source.replace(/%%text%%/g, '<span class="class_name"></span>');
document.body.innerHTML = changed;
%%text%% Что-то еще %%text%%
<div>%%text%% внутри div</div>
<em><strong>%%text%% во вложенном теге</strong></em>
А если вы имели в виду, что строка, подлежащая замене не строго равна %%text%%
, то стоит уточнить, какие значения могут находиться между знаками процента (только буквы, или буквы и цифры, может быть символы нижнего подчеркивания и т.п.).
-
нет, именно строго равна, вы все правильно поняли. код полностью работает, большое спасибо! как здесь принято благодарить? – Evgeny 23 ноя '17 в 11:20
-
@Evgeny принято нажимать на стрелочку вверх слева от ответа, если считаете его полезным, и на галочку (тоже слева от ответа), если он решил вашу проблему. – smellyshovel 23 ноя '17 в 11:43
Если надо заменить ЛЮБОЙ текст внутри %% %%, тогда так:
const toReplace = $('.to-replace');
for(let i = 0; i < toReplace.length; i++){
$(toReplace[i]).text($(toReplace[i]).text().replace(/%%[^%]*%%/g, '<span class="class_name"></span>'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-replace"> Тут меняем %%text text%%
</div>
<div class="none"> Тут останется %%text%%
</div>
<div class="to-replace"> Нечего менять изменений
</div>
<div class="to-replace"> Несколько вхождений %%text%% %%aaa%% %%12-23%%
</div>
По всему сайтку поиск организовывать не эффективно, давайте ограничимся для примера div-ами (их может быть несколько!) с классом "to-replace", и воспользуемся функцией replace с нужным нам регулярным выражением. Тогда получим:
const toReplace = $('.to-replace');
for(let i = 0; i < toReplace.length; i++){
$(toReplace[i]).text($(toReplace[i]).text().replace(/%%text%%/g, '<span class="class_name"></span>'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-replace"> Тут меняем %%text%%
</div>
<div class="none"> Тут останется %%text%%
</div>
<div class="to-replace"> Нечего менять изменений
</div>
<div class="to-replace"> Несколько вхождений %%text%% %%text%% %%text%%
</div>
-
на сколько это "не эффективно". просто я не знаю, в каких элементах может находиться строка. поэтому по ходу придется производить поиск вообще во всем body. Подошло решение пользователя "smellyshovel", но смущает ваш комментарий о "не эффективности". На сколько это будет тормозить работу сайта? – Evgeny 23 ноя '17 в 11:22
-