Add font-feature-settings via JS for specific letter

Question

I am using font-feature-settings in CSS to change some fonts into alternative glyphs.

I would like to add to all the letter "w" and "W" on the website the class ".ss03"

Then in CSS I could style it

Is there a way I can do it in JS?

Right now I am doing it manually:

<p> This is a test for te letter <span class="ss03">W</span>

<style\>

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

</style\>

Answer 1

You can do it using JavaScript

<script>
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;
  }
});
</script>