Question

我在文本段落中有一些关键字需要动态替换为内联html。使用jQuery最好的方法是什么？

e.g：

<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/

用内联html替换字符串

2 个答案: