JavaScript实现FuzzyBears短语的CSS样式定制，不干扰独立bear词汇

问题分析 #

你需要在指定容器内仅定位完整短语FuzzyBears，拆分并应用不同样式，同时不影响其他独立的bear词汇。原代码的核心问题在于：范围覆盖整个body、匹配目标错误（单独的bear而非完整短语）、直接修改innerHTML易破坏DOM结构和事件绑定。

解决方案代码 #

1. CSS样式定义

/* 应用于"fuzzy"部分的样式 */
.fuzzy {
  font-weight: 500;
  text-transform: lowercase;
}

/* 应用于"bears"部分的样式 */
.bear {
  font-weight: 800;
  color: red;
}

2. JavaScript处理逻辑

function transformFuzzyBears() {
  // 定位目标容器，仅在该范围内处理
  const targetContainer = document.querySelector('.page-content.entry-content');
  if (!targetContainer) return;

  // 递归遍历文本节点，避免破坏原有DOM结构
  function traverseNodes(node) {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      // 精准匹配完整短语"FuzzyBears"，如需区分大小写可去掉/g后的i
      const regex = /FuzzyBears/gi;
      if (regex.test(text)) {
        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        let match;

        while ((match = regex.exec(text)) !== null) {
          // 添加匹配前的普通文本
          fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
          // 创建外层fuzzy容器
          const fuzzySpan = document.createElement('span');
          fuzzySpan.className = 'fuzzy';
          fuzzySpan.appendChild(document.createTextNode('fuzzy'));
          // 创建内层bear容器
          const bearSpan = document.createElement('span');
          bearSpan.className = 'bear';
          bearSpan.appendChild(document.createTextNode('bears'));
          // 拼接结构并加入文档片段
          fuzzySpan.appendChild(bearSpan);
          fragment.appendChild(fuzzySpan);
          lastIndex = match.index + match[0].length;
        }
        // 添加剩余的普通文本
        fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
        // 替换原文本节点
        node.parentNode.replaceChild(fragment, node);
      }
    } 
    // 遍历元素节点（跳过脚本、样式等无需处理的标签）
    else if (node.nodeType === Node.ELEMENT_NODE) {
      if (!['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.tagName)) {
        for (let i = 0; i < node.childNodes.length; i++) {
          traverseNodes(node.childNodes[i]);
        }
      }
    }
  }

  traverseNodes(targetContainer);
}

// 页面加载完成后执行处理
document.addEventListener('DOMContentLoaded', transformFuzzyBears);

3. 示例HTML结构

<div class="page-content entry-content">
  <h1>Welcome to FuzzyBears</h1> 
  <p>Where you can learn all about bears and bear cubs.</p>
</div>

方案优势 #

• 精准范围：仅在.page-content.entry-content容器内处理，不干扰页面其他区域
• 精确匹配：只针对完整短语FuzzyBears，独立的bear/bears词汇不受影响
• 安全DOM操作：通过遍历文本节点并使用文档片段替换，避免破坏原有元素的事件绑定和DOM结构
• 样式分离：通过CSS类实现样式定义，便于后续维护修改

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