如何用jQuery检测连字符单词并包裹为hyphenated-word类标签？

当然可以实现，核心思路是用正则匹配目标单词，再结合DOM操作替换文本节点，避免直接修改HTML结构导致的问题，具体实现步骤和代码如下：

实现思路 #

1. 编写匹配正则：用正则表达式精准匹配带连字符的完整单词，避免误匹配HTML标签属性或非单词内容。
2. 遍历文本节点：仅处理页面中的文本节点，跳过HTML元素节点，防止破坏原有DOM结构和事件绑定。
3. 替换并包裹标签：将匹配到的单词替换为带指定类的<span>标签，替换后更新DOM节点。

代码示例 #

// 处理文本节点的核心函数
function replaceHyphenatedWords(node) {
  // 仅处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    // 正则匹配带连字符的单词，可根据需求调整字符范围
    const hyphenRegex = /\b([a-zA-Z0-9]+-[a-zA-Z0-9]+)\b/g;
    const originalText = node.textContent;
    // 替换匹配到的单词为带类名的span标签
    const replacedText = originalText.replace(hyphenRegex, '<span class="hyphenated-word">$1</span>');

    if (replacedText !== originalText) {
      const tempContainer = document.createElement('div');
      tempContainer.innerHTML = replacedText;
      // 将替换后的节点插入DOM，移除原文本节点
      while (tempContainer.firstChild) {
        node.parentNode.insertBefore(tempContainer.firstChild, node);
      }
      node.parentNode.removeChild(node);
    }
  } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SPAN') {
    // 跳过已处理的span标签，避免重复包裹，递归处理子节点
    Array.from(node.childNodes).forEach(replaceHyphenatedWords);
  }
}

// 页面加载完成后执行替换
$(document).ready(function() {
  // 可替换为指定容器，比如$('#target-container')[0]
  replaceHyphenatedWords(document.body);
});

关键说明 #

• 正则调整：如果需要匹配包含下划线、重音字符的单词，可将正则中的[a-zA-Z0-9]+修改为[a-zA-Z0-9À-ž_]+（覆盖常见西语字符）。
• 范围控制：若只需处理特定区域的内容，将document.body替换为目标容器的DOM节点即可。
• 避免重复处理：通过判断节点类型不是<span>，防止已包裹的单词被重复替换。

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