Question

它不起作用。它总是与其他一起。我需要使用数组，看看字符串是否包含数组中的任何单词。请帮助，这真的很烦

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>

Answer 1

因为要更新数组中每个项目的结果值。因此，如果数组中的最后一项不是您的输入值，则switch语句将仅检查该值。因此，您可以使用以下代码

 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>

Answer 2

您应在break块的第一个if块内使用while，否则，将在下一次迭代中将结果设置为其他值。

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>

优化版本在这里：

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>

Answer 3

我建议您取消循环和ifs，并使用array.some和String.prototype.includes大大减少代码。这段代码可以清楚地写成一行：

    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>

Answer 4

尝试一下。

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

测试字符串是否包含字符串数组中的单词

4 个答案: