如何用JS为全站动态设置font-feature-settings修改w/W显示

我想要通过font-feature-settings: "ss03" 1让网站上的字母"w"和"W"显示为另一种样式，但用以下代码尝试时，会把所有文本转为段落格式且丢失原有样式：

document.addEventListener('DOMContentLoaded', function() {
  const paragraphs = document.getElementsByTagName('p');

  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    const text = paragraph.textContent;

    const replacedText = text.replace(/(W|w)/g, '<span class="ss03">$1</span>');

    paragraph.innerHTML = replacedText;
  }
});

已解决的方案 #

通过遍历页面所有元素，给包含"w"或"W"的元素添加.ss03类即可实现需求：

// 获取页面所有元素
const allElements = document.getElementsByTagName("*");

// 遍历每个元素查找包含'w'或'W'的内容
for (const element of allElements) {
  // 检查元素文本是否包含'w'或'W'
  if (element.textContent.includes('w') || element.textContent.includes('W')) {
    // 为元素添加.ss03类
    element.classList.add('ss03');
  }
}

同时需要在CSS中定义对应的类样式：

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

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