在jQuery中用span包装一些指定的单词？

Question

我想知道用跨度标签包装一些指定单词的最方便的方法。

我有一个词，那就是狗。原文如下：

I have a dog, do you have a dog?

产出应该是这样的：

I have a <span class="highlight">dog</span>, do you have a <span class="highlight">dog</span>?

有什么帮助吗？

编辑：注意到，它也应该包装单词，即使它们不是天生的(彼得-狗)。希望你能搞定。

Answer 1

这里有一个有用的jQuery插件。

它真的很容易使用，而且效果很好。

编辑-这是我的一个非常古老的答案。我很遗憾仅仅链接了Lettering.js库，而没有包括它的名称。图书馆是有用的，尽管7年后我不确定鲁珀特先生是否继续积极维护它。

字母化是通过DOM选定区域中的文本节点，并将单个字母和/或单词(可配置的)包装在<span>标记中，然后可以对其进行样式化。很简单但很有效。即使您不想使用它，代码也不是很广泛，而且很有指导性。

Answer 2

您可以使用JavaScript替换函数。下面是一个基本的例子：

$('#container').html($('#container').html().replace(/(dog)/g,'<span class="highlight">$1</span>'));