Search code examples
javascriptcase-sensitivecase-insensitive

JavaScript: Is there a way to revert or undo .innerHTML.toLowerCase();?


Is there a way to "reverse" changing the innerHTML of an element to lowercase? Example:

HTML:

<div class="wrapper">
<p>Some text.</p>
</div>

JavaScript:

someText = document.querySelector(".wrapper").innerHTML.toLowerCase();
console.log(someText)
  // Console Log Output: "<p>some text.</p>"

Is there then a way to reverse, remove or undo the toLowerCase();, in order to return the paragraph text back to its original case? Obviously I can't just change it to UpperCase, as it will change all the text to uppercase instead of original case.

someText = document.querySelector(".wrapper").innerHTML.toLowerCase();
console.log(someText);
  // Console Log Output: "<p>some text.</p>"
someText = document.querySelector(".wrapper").innerHTML.toUpperCase();
console.log(someText);
  // Console Log Output: "<p>SOME TEXT.</p>"

However, toLowerCase(); and toUpperCase; were the only options I could find, nothing like toOriginalCase();. I want the console log to return <p>Some text.</p> again after I revert the change.

I am trying to use this method in a search functionality.

Currently on my website, https://www.codeeverydamnday.com/, if you search, for example, "Javascript" from the home page, you'll be brought to a page of search results that do indeed match and highlight the search term, but that is because I have lowercased everything on the page (as you can see in the first post, "day twenty-four", where I have several variations of the word "Javascript", like "javaScript" and "Javascript", that are all showing lowercase).

enter image description here

That is because I changed the search term to lowercase, then changed all the text on the results page to lowercase before I started matching the search term to its instances on the page and highlighting them. Once matched and highlighted, I would like to revert the text back to its original case and return that to the UI.

Edit: I also tried adding and then removing a style.textTransform = "lowercase"; , but kept running into issues with that.


Solution

  • Different answer, because the original post (prior to a fairly heavy edit) didn't mention this was for effecting text highlighting, having fallen in the trap of being a classic XY question (asking about how to undo property assignment when the real problem was how to get to look lowercase).

    The actual solution here is to not do text replacement at all, but to make sure that the highlighting markup is tied to CSS, not JS, that ensures that no matter what case the text actually is in, it's presented as lowercase to the user, with a highlight background color:

    p {
      font-family: Verdana;
    }
    
    .highlight {
      text-transform: lowercase;
      background: #FFFF0050;
    }
    <p>
      For example, to highlight <span class="highlight">JavaScript</span> in
      this "paragraph" of <span class="highlight">TEXT</span>.
    </p>

    The page text casing never changes, but the presentation does. We get "everything in lowercase" entirely for free without needing any textContent or innerHTML caching, or needing to "undo" anything with respect to the source. CSS only changes the way our source is presented, and the moment we take the highlight class (or outer tags) away, the effect goes away and we see the original text case again.