比较单词中的字母时，Javascript不区分大小写

Question

I'm have this exercise where a user enters a word then enters a letter to see how many times the letter appears in that word. This part of the project works just fine. However, I want to make it case insensitive, as of right now it's not. I thought creating a variable for uppercase and one for lowercase then comparing both of those variables to i or to the letter variable would work. However, it's making the counter double the amount of letters found in the word. Can someone help me? Here's my code:

 function checkWordAndLetter() { var userWord = $("#word").val(); console.log(userWord); var userLetter = $("#letter").val(); console.log(userLetter); var letterUpperCase = userLetter.toUpperCase(); var letterLowerCase = userLetter.toLowerCase(); var tally = 0; for (i = 0; i < userWord.length; i++) { if (userLetter == userWord[i] && i == letterUpperCase || letterLowerCase) { tally++; } } console.log(tally); $("#letterResults").html(" There are " + tally + " " + userLetter + "'s in the word " + userWord); console.log("apple"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mainPage"> <h2>Find the Letter in the Word</h2> <h4>Enter a word and select a letter to see how many times that letter appears in the word</h2> <p>Enter below:</p> <br/> Word: <input id="word" type="text" name="word"><br/><br/> Letter: <input id="letter" type="text" name="letter"><br/><br/> <br/> <br/> <button id="submit" type="button" name="submit" onclick="checkWordAndLetter()">submit</button> <p id="letterResults"></p> </div> 

Answer 1

The easiest option here, without changing the rest of your code , is to upper (or lower) case both sides of the equation so you are comparing like for like.

 function checkWordAndLetter() { var userWord = $("#word").val(); var userLetter = $("#letter").val(); var userWordUpper = userWord.toUpperCase(); var userLetterUpper = userLetter.toUpperCase(); var tally = 0; for (var i = 0; i < userWord.length; i++) { if (userLetterUpper == userWordUpper[i]) { tally++; } } $("#letterResults").html(" There are " + tally + " " + userLetter + "'s in the word " + userWord); } $("#word,#letter").change(checkWordAndLetter) checkWordAndLetter(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='word' value='hello'/> <input type='text' id='letter' value='l' /> <div id='letterResults'></div> 

---

In your original code, this line:

if (userLetter == userWord[i] && i == letterUpperCase || letterLowerCase) {

could have been:

if (letterUpperCase == userWord[i] || letterLowerCase == userWord[i]) {

---

Another option might be to use .split() which separates the string into an array by breaking on the specified character. Normally this would be , , but you can use any letter:

var tally = userWordUpper.split(userLetterUpper).length - 1;

 function checkWordAndLetter() { var userWord = $("#word").val(); var userLetter = $("#letter").val(); var userWordUpper = userWord.toUpperCase(); var userLetterUpper = userLetter.toUpperCase(); var tally = userWordUpper.split(userLetterUpper).length - 1; $("#letterResults").html(" There are " + tally + " " + userLetter + "'s in the word " + userWord); } $("#word,#letter").change(checkWordAndLetter) checkWordAndLetter(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='word' value='hello' /> <input type='text' id='letter' value='l' /> <div id='letterResults'></div> 

---

A further option would be use to a regex (edit: see Rory's answer, no need to repeat here) - the benefit of a regex is that you don't need to convert to upper/lower first.

Answer 2

If you want to count how much a letter appears in a word case-insensitively, downcase the word and the letter before iterating through the word. In this way you will be comparing the same letters. Example:

let tally = 0;
let letter = "a";
let word = "cAaatttt";
word = word.toLowerCase();
letter = letter.toLowerCase();
for (let i = 0; i < word.length; i++) {
    if (word[i] === letter) tally++;
}

Answer 3

To do what you require with your current code is to convert both the word and letter strings to match cases, then do the comparison. You can use toLowerCase() or toUpperCase() to do that.

However you can simplify the code even further than that by creating a Regular Expression and using the case-insensitivity flag ( i ) along with match() , like this:

 $('#submit').click(function() { var userWord = $("#word").val(); var userLetter = $("#letter").val(); var re = new RegExp(userLetter, 'gi'); var tally = userWord.match(re).length; $("#letterResults").html(`There are ${tally} ${userLetter}'s in the word ${userWord}`); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mainPage"> Word: <input id="word" type="text" name="word"><br/><br/> Letter: <input id="letter" type="text" name="letter"><br/><br/> <button id="submit" type="button" name="submit">submit</button> <p id="letterResults"></p> </div> 

Also note the use of an unobtrusive event handler here instead of the outdated on* event attribute, which you should avoid using.

Answer 4

Convert the word to lowercase and use the lowercase letter to check. You don't need to do uppercase === letter || lowercase === letter uppercase === letter || lowercase === letter . Another issue is your if statement as others have pointed out already.

You could also use RegExp for this in one line:

const letter = 'a'
const word = 'pizza potatoes and hamburgers'
const reg = new RegExp(letter, 'gi')
const count = (word.match(reg) || []).length // 4, 0 if no letters found