Замена строк inline html

Question

У меня есть несколько ключевых слов в абзаце текста, который необходимо заменить динамическим динамическим текстом. Какой был бы лучший способ сделать это, используя jQuery?

.: например

<p> 
Lorem :XXXX: dolor sit amet, 
consetetur :YYYY: elitr. 
</p> 

должен закончить как:

<p> 
Lorem <span class="XXXX"></span> dolor sit amet, 
consetetur <span class="YYYY"></span> elitr. 
</p> 

Answer 1

Вам не нужно JQuery для этого, но я предполагаю, что вы уже используете его в другом месте на странице. Если предположить, что текст внутри тега p просто обычный текст, и вы не пытаетесь разобрать произвольный HTML, вы могли бы сделать что-то вроде этого

var item = $('p'); 
var htmltext = item.text(); 
htmltext = htmltext.replace(/:(\w+):/g, '<span class="$1"></span>'); 
item.html(htmltext); 

Это также предполагающее «р» является селектором вы хотите. Также предполагается, что шаблон не всегда »: XXXX:« Возможно, вам придется настроить RegEx в зависимости от вашей желаемой цели.

Answer 2

Вам не нужно загружать рамки для этого, просто чистый раствор JS:

var el = document.getElementsByTagName('p')[0]; 
var replacements = [':XXXX:', ':YYYY:']; 

for (var i = 0; i < replacements.length; i++) { 
    el.innerHTML = el.innerHTML.replace(replacements[i], '<span>' + replacements[i] + '</span>'); 
} 

https://jsfiddle.net/6ung9610/1/

ИЛИ с использованием регулярных выражений:

var el = document.getElementsByTagName('p')[0]; 
el.innerHTML = el.innerHTML.replace(/(:\w+:)/g, '<span>$1</span>'); 

https://jsfiddle.net/6ung9610/3/