This is the case: i’m working on a WordPress theme and all the titles (h1,h2,h3,h4,h5,h6) on a page needs to be in uppercase except for one letter, the letter: i. This letter needs to be in lowercase. Example: THiS LETTER NEEDS TO BE iN LOWERCASE.
I’m looking for a solution where i don’t need to type the uppercase letters in WP admin manually, because I don’t want to store it this way in the database. Is there any way to achieve this?
Advertisement
Answer
You can find the elements you need to update using document.querySelectorAll("h1, h2, h3, h4, h5, h6"), which returns an array-like NodeList of the elements. You then loop through it processing each element.
You can get and set their text using their textContent property. (It’s more complicated if they may have decendant elements, like <h1>Hi <em>there</em></h1>.)
You can change all characters in a string other than i to upper case by using replace:
element.textContent = element.textContent.replace(/[a-hj-z]+/g, str => str.toLocaleUpperCase());
If you need to handle characters outside the English-centric regex above, one simple option is to use [^i]:
element.textContent = element.textContent.replace(/[^i]+/g, str => str.toLocaleUpperCase());
Using toLocaleUpperCase on something like 1 just returns it unchanged.