JavaScript：将元素中的所有文本更改为小写（不仅在 UI 中而且在 DOM 中也是如此）

Question

尝试用我有限的 JavaScript 知识组合一种有点老套的方法来查找不区分大小写的匹配单词的字符串，并 return 在控制台中输入它们的父元素。

假设您有这个 html - 一个带有 id="searchinput" 的搜索输入框和一个带有 class="submitButton" 的提交按钮，然后是它下面的一些内容。

<input type="text" placeholder="Search..." id="searchinput">
<button type="submit" class="submitButton">Submit</button>

<div class="wrapper">
  <p>Charlie sat on the chair.</p>
</div>

<div class="wrapper">
  <p>It's a nice day today.</p>
</div>

<div class="wrapper">
  <p>charlie went to the store.</p>
</div>

然后你有这个 JS，一个事件侦听器，当你点击“提交”按钮时触发，它循环遍历所有 div，class="wrapper" 寻找div 与您输入的 searchValue 匹配，并且控制台记录每个包含搜索词的包装 div：

function submitButtonFunction() {
  searchValue = document.getElementById('searchinput').value;
    // variable that defines the word you type into the search box
  allWrappers = document.querySelectorAll('.wrapper');
    // variable that defines all of the elements with the class "wrapper"
  allWrappers.forEach(
      e => { if (e.innerHTML.includes(searchValue)) {
               return console.log(e);
             } else {
               return;
             }
           });
    // loops through each "wrapper" div's innerHTML looking for divs that contain your search word and console logging the div

document.querySelector('.submitButton').addEventListener('click', submitButtonFunction, false)
    // calls the function on click of submit button

如果您搜索单词“charlie”，它只会记录上面的第三个 <div>，因为它是唯一一个完全匹配全小写的“charlie”的单词。但是，我也想要第一个 <div> 到 return，带有大写“Charlie”的那个。

我试过类似的方法，将 searchValue 更改为小写，然后使用 css text-tranform: lowercase 暂时将包装器 div 中的所有文本更改为小写] 属性，在遍历包装器 div 以找到包含 searchValue 字符串的包装器之前，然后删除 text-transform 属性：

function submitButtonFunction() {
  searchValue = document.getElementById('searchinput').value.toLowerCase();
    // changes the word you searched to lowercase
  allWrappers = document.querySelectorAll('.wrapper');
  allWrappers.forEach(
    e => { e.style.textTransform = "lowercase";
             // changes all the text in the wrapper div to lowercase
          if (e.innerHTML.includes(searchValue)) {
            e.style.removeProperty('text-transform');
             // after finding div's that include the search term, change back to regular case
              return console.log(e);
           } else {
            e.style.removeProperty('text-transform');
              return;
           }
         });

但是，这仅改变了文本 在 UI（小写）中的显示方式，而在 DOM（常规大小写）中保持不变，如下面的屏幕截图所示。注意：即使我删除了 .style.removeProperty('text-transform'); 行，控制台日志在正常情况下仍会返回 e 。虽然我的代码在这张图片中略有不同，但你明白了：

由于 DOM 仍然是常规大小写，搜索“charlie”仍然只会在控制台中返回“charlie”的小写实例。

有没有办法实际更改 DOM 中的大小写，执行 find/compare，并带回包含匹配项的元素，然后再更改大小写？

我阅读了其他问题，可以让您进行这样的比较：

var areEqual = string1.toUpperCase() === string2.toUpperCase();

但是为了让它对我有用，我必须将每个单词都放在 <span> 或其他东西中，以便遍历所有跨度并比较值，而我正在寻找通过一大段单词并尝试找到该文本中包含搜索值的任何实例。

我还读到了另一种使用 RegExp 进行比较的方法，但我还没有学习 RegExp，在理解这个概念时遇到了一些困难。

当然，如果有我所缺少的更简单的方法，我也很想听听！请记住，我是 JS 新手 :)

Answer 1

获取输入的值时，将其转化为toLowerCase

searchValue = document.getElementById("searchinput").value.toLowerCase();
如果使用 textContent 将文本放入 wrapper 中，这样我们就可以在其上应用 toLowerCase，那就太好了。 if (e.textContent.toLowerCase().includes(searchValue)) {

提示： 为什么要将 return 与 console.log return console.log(e); 一起使用。 console.log returns undefined 最好使用 console.log(e)

const result = console.log(10);
console.log(result);

function submitButtonFunction() {
  searchValue = document.getElementById("searchinput").value.toLowerCase();
  // variable that defines the word you type into the search box
  allWrappers = document.querySelectorAll(".wrapper");
  // variable that defines all of the elements with the class "wrapper"
  allWrappers.forEach((e) => {
    if (e.textContent.toLowerCase().includes(searchValue)) {
      return console.log(e);
    } else {
      return;
    }
  });
}
// loops through each "wrapper" div's innerHTML looking for divs that contain your search word and console logging the div

document
  .querySelector(".submitButton")
  .addEventListener("click", submitButtonFunction, false);
// calls the function on click of submit button

<input type="text" placeholder="Search..." id="searchinput">
<button type="submit" class="submitButton">Submit</button>

<div class="wrapper">
  <p>Charlie sat on the chair.</p>
</div>

<div class="wrapper">
  <p>It's a nice day today.</p>
</div>

<div class="wrapper">
  <p>charlie went to the store.</p>
</div>

JavaScript：将元素中的所有文本更改为小写（不仅在 UI 中而且在 DOM 中也是如此）

JavaScript: Change All Text in Element to Lowercase (not just on UI but in DOM as well)

javascript

css

case-insensitive