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

Question

有没有办法“反转”将元素的内部 HTML 更改为小写？示例：

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();，以便 return 将段落文本恢复到原来的大小写？显然我不能只将其更改为大写，因为它会将所有文本更改为大写而不是原始大小写。

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(); 完全不同。我希望在还原更改后控制台日志再次显示为 return <p>Some text.</p>。

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

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

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

编辑：我也尝试添加然后删除 style.textTransform = "lowercase"; ，但运行仍然存在问题。

Answer 1

简答：没有。

更长的答案：不，因为 innerHTML（和 textContent，您应该将其用于文本，从不使用 innerHTML除非你真的在构建 HTML，即使那样，使用 DOM 方法几乎总是更好）是 DOM 节点上的标准对象属性，如果你覆盖属性有了新的价值，那就是它的新价值。没有什么可以恢复的，因为唯一存在的就是当前值。

当然，您当然可以在事后重新格式化字符串（例如，将句子中的每个首字母大写）但原始值会丢失：这将是一个 new 操作, 基于 exising 小写字符串。

Answer 2

您可以通过将字母转换为 toUpperCase():

来引用文本的第一个字母

someText.charAt(0).toUpperCase() + someText.substring(1)

第一个控制台显示 toLowerCase() 的结果。而第二个控制台根据上面的toLowerCase()模拟文本的初级状态

let someText = document.querySelector(".wrapper p").innerHTML.toLowerCase();
console.log(someText);
console.log(someText.charAt(0).toUpperCase() + someText.substring(1));

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

Answer 3

您可以简单地将原始 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() 搜索方法并不是您需要做的。

而是使用 regular expressions to do case-insensitive matching。

看这个简单的例子：

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

Answer 4

不同的答案，因为原来的post（在相当大的编辑之前）没有提到这是为了影响文本突出显示，陷入了成为classic XY question的陷阱（询问关于如何撤消属性分配，而真正的问题是如何看起来小写）。

这里的实际解决方案是根本不做文本替换，而是确保高亮标记绑定到CSS，而不是JS，这样可以确保无论文本实际上是什么情况，它都以小写形式呈现给用户，并带有突出显示的背景颜色：

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>

页面文本大小写永远不会改变，但 演示文稿 会改变。我们完全免费获得“所有小写字母”，不需要任何 textContent 或 innerHTML 缓存，也不需要“撤消”与源相关的任何内容。 CSS 只改变了我们源代码的呈现方式，当我们去掉高亮 class （或外部标签）时，效果消失，我们再次看到原始文本案例。

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

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

javascript

case-sensitive

case-insensitive