Test whether a string contains a word from an array of strings

Question

it doesn't work. it always goes with the else. i need to use array, and see if a string contains any of the words of the array. please help, this is really annoying

function buttonClick() {
  var name = document.getElementById('myText').value;
  var yourstring = name;
  var substrings = ['fruit', 'apple'];
  var length = substrings.length;
  while (length--) {
    if (yourstring.indexOf(substrings[length]) != -1) {
      var outcome = 1;
    } else {
      var outcome = 2;
    }
  }
  switch (outcome) {
    case 1:
      document.getElementById('fruitvalue').innerHTML = name + 'is ...';
      break;
    case 2:
      document.getElementById('fruitvalue').innerHTML = name + 'is not ...';
      break;
  }
}

<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button 
      onClick="buttonClick()" 
      style="font-family:font; color:blue;"
    >Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>
</head>

code is only going to be whatever the last step will be since you check outcome outside of the loop.... — epascarello
– epascarello, Commented Oct 27, 2018 at 1:45

Ankush Sharma · Accepted Answer · 2018-10-27 02:05:50Z

1

Because you are updating your outcome value for each item in the array. So, if the last item in the array is not your input value, switch statement will check for that only. So, you can use code like below

 function buttonClick() {
    var name = document.getElementById("myText").value;
    var yourstring = name;
    var substrings =['fruit', 'apple'];
    //only change
    document.getElementById("fruitvalue").innerHTML = 
    substrings.includes(yourstring) ? // use of includes function to check item in the array
    (name + " is ...") : 
    (name + " is not ...");  
}

<body>
    <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font; 
    color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
    </center>
</body>

edited Oct 27, 2018 at 2:05

answered Oct 27, 2018 at 1:59

Ankush Sharma

6773 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lucascaro · Accepted Answer · 2018-10-27 02:49:01Z

I'd suggest you do away with the loops and the ifs, and significantly reduce the code by using array.some and String.prototype.includes. This code could be clearly written as a single line:

    function hasWord(str, words) {
      return words.some(word => str.includes(word));
    }

    const name = document.getElementById('myText').value;
    const substrings = ['fruit', 'apple'];
    const element = document.getElementById('fruitvalue');
    
    function buttonClick() {
      const matches = hasWord(name, substrings);    
      const suffix = matches ? 'is ...' : 'is not ...';
      element.innerHTML = `${name} ${suffix}`;
    }

    <body>
      <center>
        Last Name:
        <input type="text" id="myText" value="">
        <button 
          onClick="buttonClick()" 
          style="font-family:font; color:blue;"
        >Submit</button>
        <h2 id="fruitvalue"></h2>
      </center>
    </body>

wang · Accepted Answer · 2018-10-27 02:06:00Z

0

You should use break inside first if block of while block, otherwise, outcome will be set with other values in next iterations.

function buttonClick() {
  var name = document.getElementById("myText").value;
  var yourstring = name;
  var substrings =['fruit', 'apple'],
      length = substrings.length;
      
  while(length--) {
    if (yourstring.indexOf(substrings[length])!==-1) {
      var outcome=1;
      break;
    }
    else {
      var outcome=2;
    }
  }
  
  switch (outcome) {
    case 1 :
      document.getElementById("fruitvalue").innerHTML = (name + "is ...");
      break;
    case 2 :
      document.getElementById("fruitvalue").innerHTML = (name + "is not ...");
      break;
  }
}

<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font;color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>

Optimized version is here:

function buttonClick() {
  const yourstring = document.getElementById("myText").value;
  const substrings =['fruit', 'apple']
  
  document.getElementById("fruitvalue").innerHTML = substrings.filter(s => yourstring.indexOf(s) !== -1).length ?
     (yourstring + " is ...") : (yourstring + " is not ...")
}

<body>
  <center>
    Last Name:<input type="text" id="myText" value="">
    <button onClick="buttonClick()" style="font-family:font;color:blue;">Submit</button>
    <h2 id="fruitvalue"></h2>
  </center>
</body>

edited Oct 27, 2018 at 2:06

answered Oct 27, 2018 at 1:58

wang

1,78012 silver badges20 bronze badges

2 Comments

Ankush Sharma Over a year ago

i think, indexOf() is not the correct logic to compare the data exactly. It will break for input like, apples

wang Over a year ago

that's what @AnkushSharma want?

Ropali Munshi · Accepted Answer · 2018-10-27 07:14:01Z

0

Try this.

function buttonClick() {
  var name = document.getElementById('myText').value;
  var yourstring = name;
  var substrings = ['fruit', 'apple'];

    if (substrings.includes(yourstring)) {
      var outcome = 1;
    } else {
      var outcome = 2;
    }

  switch (outcome) {
    case 1:
      document.getElementById('fruitvalue').innerHTML = name + ' is ...';
      break;
    case 2:
      document.getElementById('fruitvalue').innerHTML = name + ' is not ...';
      break;
  }
}

answered Oct 27, 2018 at 7:14

Ropali Munshi

3,0365 gold badges27 silver badges49 bronze badges

Collectives™ on Stack Overflow

Test whether a string contains a word from an array of strings

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related