How to lowercase one specific letter?

Question

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?

Please be more specific about what you are trying to do. Which letter should be lowercase? Is it the same in every heading? Is it based on position, a specific character, the word it is in, etc? — FluffyKitten, Sep 21 '20 at 16:23
I don't understand why it's not specific enough. All your questions are answered in my description. Anyway, i've edited the question. — ElBrm, Sep 21 '20 at 17:59

score 2 · Accepted Answer · answered Sep 21 '20 at 16:19

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.

How to lowercase one specific letter?

1 Answers1