用內聯html代替字符串

Question

在一段文本中有幾個關鍵字需要動態地用內聯html替換。使用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); 

這也假設「P」是你想要的選擇。另外，假設該模式並不總是「：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/