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

Question

I want to be able to search for a value without having to explicitly type in the first letter using uppercase. Hence it can be recognised in lowerCase also. Any help please?

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");
            }

        }

Why not have them all uppercase in the array and then compare against toUpperCase — Pete, May 02 '18 at 15:14
Possible duplicate of [javascript includes() case insensitive](https://stackoverflow.com/questions/48145432/javascript-includes-case-insensitive) — Pete, May 02 '18 at 15:14
Possible duplicate of [Case insensitive regex in javascript](https://stackoverflow.com/questions/3939715/case-insensitive-regex-in-javascript) — sɐunıɔןɐqɐp, May 02 '18 at 15:24

Jeremy Thille · Accepted Answer · 2018-05-02T15:23:21.533

2

Simply test lowercase values. Also, I would suggest to cache the input DOM element and to define the array outside of the function, so they're not uselessly redefined every time the function is called.

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");
        }
}

edited May 02 '18 at 15:23

answered May 02 '18 at 15:19

Jeremy Thille

26,047
12
43
63

you will probably want your animal name to be in the scope of the function, otherwise it won't change as the function is called (presumably called every time a user types) – Joe Lissner May 02 '18 at 15:21
2

I'm only caching the DOM element, that probably won't change over time. – Jeremy Thille May 02 '18 at 15:22

score 1 · Answer 2 · answered May 02 '18 at 15:19

set both the input and internal array to lower case using the toLowerCase method. Since the animals are an array we map over the array and turn each item to lower case. We then get the input value and turn it into lowercase and afterwards a simple includes check is done.

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>

ASIDE: There are better ways to do this. For instance, since you're constructing the array every time animal is called I could only assume you had a reason for this and decided to map over the array instead of adjusting your code. If you don't have a reason for this, I would advise adjusting your code to receive that array instead of building it every time.

score 0 · Answer 3 · answered May 02 '18 at 15:20

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>

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

3 Answers3