jquery - 在jQuery中用跨度包装一些指定的单词？

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

您可以使用JavaScript 替换功能。这是一个基本示例：

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

Answer 2

这是一个有用的jQuery 插件。

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

编辑-这是我的一个非常古老的答案。我很遗憾在没有包含名称的情况下简单地链接了 Lettering.js 库。该库很有用，尽管我不确定 7 年后鲁珀特先生是否继续积极维护它。

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