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。

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

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() 搜索方法并不是您需要做的。

相反，使用 regular expressions 执行 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 2

简答：没有。

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

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

Answer 3

您可以通过将该字母转换为 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 4

不同的答案，因为原始帖子（在相当重的编辑之前）没有提到这是为了影响文本突出显示，陷入了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 只改变了我们的源代码的呈现方式，当我们去掉高亮类（或外部标签）时，效果就会消失，我们再次看到原始文本案例。

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

4 个答案: