全站统一将指定词段设置为Small Caps的实现方案求助

核心思路：批量处理替代局部修改 #

无需逐个调整页面内容，通过CSS或JavaScript实现全站自动匹配“ulum”并应用Small Caps样式，以下是两种可靠方案：

方案1：CSS全局匹配+自定义属性 #

给全站所有包含公司名称的元素统一添加专属类名（比如company-brand），再通过CSS伪元素实现样式替换：

.company-brand {
  position: relative;
  visibility: hidden; /* 隐藏原文本 */
}
.company-brand::after {
  content: attr(data-brand);
  font-variant: small-caps;
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible; /* 显示带样式的文本 */
}

使用时只需给包含公司名称的元素添加属性：

<span class="company-brand" data-brand="MyUlamCompany">MyUlamCompany</span>

如果公司名称固定，还可以直接在CSS的content中写死，无需每个元素加属性。

方案2：JavaScript批量文本替换 #

通过JS遍历页面所有文本节点，自动给“ulum”包裹样式标签，一次性覆盖全站：

function applyUlamSmallCaps() {
  const ulamRegex = /ulum/gi;
  // 遍历所有文本节点，跳过脚本和样式标签
  const textNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
  let currentNode;
  while (currentNode = textNodes.nextNode()) {
    const parentTag = currentNode.parentElement.tagName;
    if (parentTag !== 'SCRIPT' && parentTag !== 'STYLE') {
      const originalText = currentNode.textContent;
      const modifiedText = originalText.replace(ulamRegex, '<span style="font-variant: small-caps">$&</span>');
      if (modifiedText !== originalText) {
        const wrapper = document.createElement('span');
        wrapper.innerHTML = modifiedText;
        currentNode.parentNode.replaceChild(wrapper, currentNode);
      }
    }
  }
}
// 页面加载完成后执行
window.addEventListener('load', applyUlamSmallCaps);

把这段代码放到全站通用的JS文件里，打开任何页面都会自动生效。

之前方法无效的原因 #

• 局部<span>标签：仅能作用于单个元素，无法批量覆盖全站所有出现“ulum”的位置，工作量大是必然结果。
• 段落样式写法：仅对指定类的段落生效，若公司名称出现在导航栏、按钮、页脚等非段落元素中，就无法覆盖，导致全站生效失败。

内容的提问来源于stack exchange，提问作者Irina C. Kotal