如何用jQuery或原生JS将指定HTML标签内的特定文本片段包裹在<span>中？

问题背景 #

需要将指定HTML标签（比如示例中的<h3>）文本内容里的某个单词（甚至单词的一部分），用带类名的<span>标签包裹高亮。目前只能选中包含目标文本的完整标签，但无法精准选中并包裹标签内的目标文本片段——找到的方法要么选中整个标签，要么包裹全部内容（比如jQuery的wrapInner()），不符合需求。

示例问题代码 #

原代码会把整个<h3>标签包裹起来，不是我们要的效果：

$('h3:contains(icular)').wrap("<span class='highlight'></span>");

.highlight {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>This is the first of several h3 headings</h3>
<h3>This is another h3 heading, containing a particular word</h3>
<h3>This is another h3 heading</h3>
<h3>This is another h3 heading, again containing a particular word</h3>
<h3>This is the way it should look: part<span class="highlight">iculär</span> word</h3>
<p>This is a p tag, containing the same particular word/string. It should not be affected in this process.</p>

解决方案 #

方法一：jQuery实现 #

核心逻辑是遍历符合条件的标签，将文本中的目标子字符串替换为带高亮类的<span>，只修改目标片段，不影响其他内容。

完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>This is the first of several h3 headings</h3>
<h3>This is another h3 heading, containing a particular word</h3>
<h3>This is another h3 heading</h3>
<h3>This is another h3 heading, again containing a particular word</h3>
<h3>This is the way it should look: part<span class="highlight">iculär</span> word</h3>
<p>This is a p tag, containing the same particular word/string. It should not be affected in this process.</p>

<style>
.highlight {
  color: green;
}
</style>

<script>
const targetText = 'icular';
// 遍历所有包含目标文本的h3标签
$('h3:contains(' + targetText + ')').each(function() {
  let currentHtml = $(this).html();
  // 全局匹配目标文本，如需区分大小写可去掉'i'
  const matchRegex = new RegExp(targetText, 'gi');
  // 替换目标文本为高亮span，$&表示匹配到的内容
  currentHtml = currentHtml.replace(matchRegex, '<span class="highlight">$&</span>');
  $(this).html(currentHtml);
});
</script>

方法二：原生JavaScript实现 #

无需依赖jQuery，用原生API实现同样效果：

完整代码

<h3>This is the first of several h3 headings</h3>
<h3>This is another h3 heading, containing a particular word</h3>
<h3>This is another h3 heading</h3>
<h3>This is another h3 heading, again containing a particular word</h3>
<h3>This is the way it should look: part<span class="highlight">iculär</span> word</h3>
<p>This is a p tag, containing the same particular word/string. It should not be affected in this process.</p>

<style>
.highlight {
  color: green;
}
</style>

<script>
const targetText = 'icular';
// 获取所有h3标签
const h3Tags = document.querySelectorAll('h3');
// 处理正则特殊字符（如果目标文本有./*等符号，必须转义）
function escapeRegex(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
const matchRegex = new RegExp(escapeRegex(targetText), 'gi');

h3Tags.forEach(tag => {
  if (tag.textContent.includes(targetText)) {
    tag.innerHTML = tag.innerHTML.replace(matchRegex, '<span class="highlight">$&</span>');
  }
});
</script>

注意事项 #

• 如果目标文本包含正则特殊字符（比如.、*、?），一定要用转义函数处理，否则正则会失效。
• 正则里的g表示全局匹配（替换所有出现的目标文本），i表示不区分大小写，可根据需求调整。
• 示例中只处理<h3>标签，<p>标签不受影响，符合需求。

内容的提问来源于stack exchange，提问作者Johannes