Javascript: How to check if string does not contain a specific letter?

Question

document.getElementById("button").onclick = 
    function() {        
        var str = document.getElementById("string").value;
        console.log("The string you entered: ", str)
        var letter = document.getElementById("letter").value;
        console.log("The letter you entered: ", letter)

        //var letterCheck = str.includes(letter)
        //var letterCeck = str.indexOf(letter) !== -1
        if(!str.indexOf(letter)) {
            alert("Letter does not exist in the string")
        }
        else {
            var afterLetter = str.substring(str.indexOf(letter)+1);
            console.log("Substring:",afterLetter)
        }
    }

Here I want to implement the if statement if the letter I input does not exist in the string, and if the letter is there in the string it should execute else statement and print the output. The commented statements are the ways I ways trying to execute the if statement condition.

To better explain what I'm trying to do, this is the problem I'm working on: Create an HTML page with the following functionality i. It should ask the user 2 inputs:

Enter a Sentence (any English sentence)
Enter a Letter (any letter from A to Z) ii. On clicking on “Submit” button it should output the rest of the sentence after the first occurrence of the letter in the sentence iii. If the letter does not exist in the sentence, output -> “The letter does not exist in the sentence”.

iv. Example 1

Sentence: Hello World!
Letter: r
Result: ld!

v. Example 2

Sentence: Hello World!
Letter: o
Result: World!

If the string is at the start, indexOf returns 0 (which is falsey) and if the string isn't found, indexOf returns -1 (which is truthy). Which means `!str.indexOf(letter)` is not suitable to test what you want to test. You need `str.indexOf(letter) === -1` instead — , Aug 02 '22 at 18:55

score 0 · Answer 1 · answered Aug 02 '22 at 18:55

First, you will need to convert both the input and the letter to the same case, I used .toLowerCase()

The for your indexOf, use indexOf == -1

document.getElementById("button").onclick = 
    function() {        
        var str = document.getElementById("string").value.toLowerCase();
        console.log("The string you entered: ", str)
        var letter = document.getElementById("letter").value.toLowerCase();
        console.log("The letter you entered: ", letter)

        //var letterCheck = str.includes(letter)
        //var letterCeck = str.indexOf(letter) !== -1
        if(str.indexOf(letter) == -1) {
            alert("Letter does not exist in the string")
        }
        else {
            var afterLetter = str.substring(str.indexOf(letter)+1);
            console.log("Substring:",afterLetter)
        }
    }

<input id="string" value="asad asd">
<input id="letter" value="A">
<button id="button">Test</button>

@ChrisG it was marked as a dupe 5 minutes after I left my answer. — imvain2, Aug 02 '22 at 19:07
That's because I saw it too late. Besides the point though, this is an obvious dupe and can easily be marked as such. Please always check for dupes before posting answers. — , Aug 02 '22 at 19:24

AndrewL64 · Answer 2 · 2022-08-02T19:07:15.260

Just change this line:

if(!str.indexOf(letter)) {

To this:

if(str.indexOf(letter) === -1) {

Also, just the above would be a dupe but I I would like to add that it's recommended that you use an event listener instead of onclick and const/let instead of var like this:

const btn = document.getElementById("button");

btn.addEventListener('click', function() {        
        const str = document.getElementById("string").value;
        console.log("The string you entered: ", str)
        const letter = document.getElementById("letter").value;
        console.log("The letter you entered: ", letter);
        if(str.indexOf(letter) === -1)) {
            alert("Letter does not exist in the string");
        }
        else {
            const afterLetter = str.substring(str.indexOf(letter)+1);
            console.log("Substring:",afterLetter);
        }
});

<input type="text" id="string" placeholder="string here"/>
<input type="text" id="letter" placeholder="letter here"/>
<button id="button">Click Me</button>

Obvious dupe, please mark as such instead of posting an answer. — , Aug 02 '22 at 19:24
@ChrisG Added additional details not provided in the dupe but yeah, I have marked it as a dupe regardless. — AndrewL64, Aug 03 '22 at 06:25

Javascript: How to check if string does not contain a specific letter?

2 Answers2