Замена в html-коде при помощи JavaScript или jQuery

270

24 ноября 2017, 08:39

На сайте есть текст, например такой и он может встречаться несколько раз: %%text%% Как при помощи JavaSrcipt/jQuery заменить ВСЕ вхождения этого текста на: <span class="class_name"></span>

Answer 1

Получите элемент, в котором может встречаться подобный шаблон (в примере я взял 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%%, то стоит уточнить, какие значения могут находиться между знаками процента (только буквы, или буквы и цифры, может быть символы нижнего подчеркивания и т.п.).

Answer 2

Если надо заменить ЛЮБОЙ текст внутри %% %%, тогда так:

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>

Answer 3

По всему сайтку поиск организовывать не эффективно, давайте ограничимся для примера 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>