如何使用纯 javascript 使数组中的输入值不区分大小写

Question

我希望能够搜索一个值，而不必使用大写字母显式键入第一个字母。因此它也可以识别为小写字母。有什么帮助吗？

function animal(){
        var animal = ["Panda", "Snake", "Lemur", "Tortoise", "Whale", "Cat", "Elephant", "Jaguar", "Panther", "Llama", "Horse", "Cheetah", "Leopard", "Anteater", "Tazmanian Devil"];

            if(animal.includes(document.getElementById("animalName").value)){
                console.log("That animal is available");
            }
            else{
                console.log("That animal is not available at the moment");
            }

        }

Answer 1

使用 toLowerCase 方法将输入数组和内部数组都设置为小写。由于动物是一个数组，我们映射数组并将每个项目转换为小写。然后我们获取输入值并将其转换为小写，然后进行简单的 includes 检查。

document.querySelector("#myBtn").addEventListener("click", animal);

function animal(){
        var animal = ["Panda", "Snake", "Lemur", "Tortoise", "Whale", "Cat", "Elephant", "Jaguar", "Panther", "Llama", "Horse", "Cheetah", "Leopard", "Anteater", "Tazmanian Devil"].map(animal => animal.toLowerCase()), 
         myValue = document.getElementById("animalName").value.toLowerCase();

            if(animal.includes(myValue)){
                console.log("That animal is available");
            }
            else{
                console.log("That animal is not available at the moment");
            }

        }

<input id="animalName" />
<button id="myBtn">Click Me</button>

旁白：有更好的方法可以做到这一点。例如，由于每次调用 animal 时您都在构建数组，我只能假设您有这样做的原因并决定映射数组而不是调整代码。如果您没有这样做的理由，我建议您调整您的代码以接收该数组，而不是每次都构建它。

Answer 2

简单地测试小写值。此外，我建议缓存输入 DOM 元素并在函数外部定义数组，这样它们就不会在每次调用函数时都无用地重新定义。

const animalName = document.getElementById("animalName"),
       animal = ["panda", "snake", "lemur", "tortoise", "whale", "cat", "elephant", "jaguar", "panther", "llama", "horse", "cheetah", "leopard", "anteater", "tazmanian devil"]

function animal(){
        let typed = animalName.value.toLowerCase().trim()

        if(animal.includes(typed)){
          console.log("That animal is available");
        } else {
          console.log("That animal is not available at the moment");
        }
}

Answer 3

function animal(){
  var animal = ["Panda", "Snake", "Lemur", "Tortoise", "Whale", "Cat", "Elephant", "Jaguar", "Panther", "Llama", "Horse", "Cheetah", "Leopard", "Anteater", "Tazmanian Devil"];
  var valueToFind = document.getElementById("animalName").value;

valueToFind=valueToFind.toLowerCase();
valueToFind=valueToFind[0].toUpperCase()+valueToFind.substr(1);

  if(animal.includes(valueToFind)){
    console.log("That animal is available");
  }
  else{
    console.log("That animal is not available at the moment");
  }
}
        
var button= document.body.querySelector('button');
        
button.onclick=function(){
   animal();
}

<input type="text" id="animalName">
<button>test</button>

如何使用纯 javascript 使数组中的输入值不区分大小写

how can i make the input value case-insenstive in an array using pure javascript

javascript

arrays

case-insensitive