javascript - JavaScript：有没有办法恢复或撤消 .innerHTML.toLowerCase();？

Question

有没有办法“反转”将元素的 innerHTML 更改为小写？例子：

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>"

那么有没有办法反转、删除或撤消toLowerCase();, 以便将段落文本恢复为原始大小写？显然我不能只将其更改为大写，因为它会将所有文本更改为大写而不是原始大小写。

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>"

但是，toLowerCase();这toUpperCase;是我能找到的唯一选择，没有什么像toOriginalCase();. 我希望控制台日志<p>Some text.</p>在我恢复更改后再次返回。

我正在尝试在搜索功能中使用此方法。

目前在我的网站https://www.codeeverydamnday.com/上，如果您从主页搜索例如“Javascript”，您将被带到确实匹配并突出显示搜索的搜索结果页面术语，但那是因为我将页面上的所有内容都小写了（正如您在第一篇文章“第 24 天”中看到的那样，我有几个“Javascript”这个词的变体，比如“javaScript”和“Javascript” ，都显示小写）。

那是因为我将搜索词更改为小写，然后将结果页面上的所有文本更改为小写，然后我开始将搜索词与其在页面上的实例匹配并突出显示它们。一旦匹配并突出显示，我想将文本恢复为原始大小写并将其返回给 UI。

编辑：我也尝试添加然后删除 a style.textTransform = "lowercase"; ，但一直遇到问题。

标签： javascriptcase-sensitivecase-insensitive

Answer 1

您可以简单地将原始 HTML 存储在元素上。

// nothing stops you from creating your own property on the div#wrapper element
// which you can use to store the original HTML in
wrapper.originalHTML = wrapper.innerHTML;

<div id="wrapper">
  <p>Some text.</p>
</div>
<button onclick="wrapper.innerHTML = wrapper.innerHTML.toLowerCase()">toLowerCase()</button>
<button onclick="wrapper.innerHTML = wrapper.originalHTML">and back</button>

话虽如此，您的整个toLowerCase()搜索方法并不是您需要做的。

相反，使用正则表达式进行不区分大小写的匹配。

看这个简单的例子：

s.addEventListener('input', () => {
  let regex = new RegExp(s.value, 'gi');
  console.log(text.innerText.match(regex));
})

<div id="text">foobar <span>FooBAR <i>fooBar</i> Foo</span>Bar foObAR</div>

<input type="search" id="s" placeholder="type &quot;foobar&quot; here">