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

Question

我想知道用span-tags包装一些指定单词的最方便方法。

实施例： 我有一个词，就是狗。这是原始文本：

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

您可以使用JavaScript replace function。这是一个基本的例子：

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

Answer 2

这是一个有用的jQuery plugin。

它非常易于使用且效果很好。

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

Lettering所做的是遍历DOM的选定区域中的文本节点，并将单个字母和/或单词（可配置）包装在<span>标签中，然后进行样式设置。这很简单但很有效。即使你不想使用它，代码也不是很广泛而且是教学的。