javascript - 用内联 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:”，您可能需要根据您想要的目标调整正则表达式。