如何通过JS为网站所有w/W字母添加.ss03类以应用font-feature-settings

你可以通过JavaScript遍历页面中的文本节点，自动将所有小写字母w和大写字母W用带.ss03类的<span>标签包裹，无需手动添加。以下是具体实现方案：

实现步骤与代码 #

1. 核心处理函数 #

这个函数会递归遍历DOM节点，只处理可见文本节点，跳过脚本、样式等非内容节点：

function wrapWWithSS03() {
  // 匹配小写w和大写W的正则
  const regex = /([wW])/g;
  // 可替换为特定容器节点，比如document.getElementById('target-container')
  const root = document.body;

  // 递归遍历节点的内部函数
  function traverse(node) {
    // 跳过不需要处理的节点类型
    if (node.nodeType === Node.SCRIPT_NODE || node.nodeType === Node.STYLE_NODE || node.nodeType === Node.COMMENT_NODE) {
      return;
    }

    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      if (regex.test(text)) {
        // 创建文档片段减少DOM操作次数
        const fragment = document.createDocumentFragment();
        const parts = text.split(regex);

        parts.forEach(part => {
          if (regex.test(part)) {
            // 为w/W创建带ss03类的span
            const span = document.createElement('span');
            span.className = 'ss03';
            span.textContent = part;
            fragment.appendChild(span);
          } else {
            // 普通文本直接创建文本节点
            fragment.appendChild(document.createTextNode(part));
          }
        });

        // 替换原文本节点
        node.parentNode.replaceChild(fragment, node);
      }
    } else {
      // 递归处理子节点
      for (let i = 0; i < node.childNodes.length; i++) {
        traverse(node.childNodes[i]);
      }
    }
  }

  // 启动遍历
  traverse(root);
}

2. 执行时机 #

确保DOM加载完成后再执行函数，避免节点未渲染导致的问题：

// DOM内容加载完成后自动执行
document.addEventListener('DOMContentLoaded', wrapWWithSS03);

// 若有动态加载内容（如AJAX、滚动加载），在内容加载完成后手动调用
// 示例：ajaxSuccessCallback() { wrapWWithSS03(); }

3. 保留原有CSS样式 #

你的原有CSS可以继续使用，无需修改：

.ss03 {
  font-feature-settings: "ss03" 1;
}

注意事项 #

• 若只需处理页面特定区域的文本，将document.body替换为目标容器的DOM节点即可（比如document.querySelector('.article-content')）。
• 动态加载的内容需要在加载完成后重新调用处理函数，否则新内容中的w/W不会被包裹。
• 脚本会自动跳过脚本、样式和注释节点，不会影响页面功能代码。

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