如何检查用户提交的文本输入中的特定字符串？

Question

I am trying to write a vanilla JavaScript function that checks the user's text input for specific pieces of string that have been defined in an array. The string does not have to match exactly but at least one of the defined strings (in the array) must form at least part of the user text input.

Essentially, a user will input a question and the function will check if the question is valid (ie contains question words such as how, why, when, etc.).

I have succeeded in partially achieving what I'm looking for using the indexOf() and includes() methods but they will only work when there is an exact match and not when one the question words (defined in the array) forms only part of the question submitted by the user.

My HTML

<div class="user-input">
  <input type="text" class="form-control user-question" placeholder="What is your question?">
  <button type="button" class="btn">Submit</button> 
</div>

My JavaScript

const questionWords = [
  'what',
  'when',
  'where',
  'who',
  'whom',
  'which',
  'whose',
  'why',
  'what',
  'how',
  '?'
]

let question = document.querySelector('.user-question');
let button = document.querySelector('.btn');

button.addEventListener('click', validQuestion);

function validQuestion() {
  if (questionWords.indexOf(question.value) > -1) {
    console.log('good question');
  } else {
    console.log('bad question');
  }
};

includes() method

function validQuestion() {
  if (questionWords.includes(question.value)) {
    console.log('good question');
  } else {
    console.log('bad question');
  }
};

I understand that the some() method may work but am having difficulty in applying it to my example above.

Answer 1

I'd say try it with a RegExp

Note : You have to escape the? since it's a regex token too.

 const questionWords = [ 'what', 'when', 'where', 'who', 'whom', 'which', 'whose', 'why', 'what', 'how', '\\?' ]; let question = document.querySelector('.user-question'); let button = document.querySelector('.btn'); button.addEventListener('click', validQuestion); function validQuestion() { if (new RegExp(`(${questionWords.join("|")})`, "gi").test(question.value)) { console.log('good question'); } else { console.log('bad question'); } };

 <div class="user-input"> <input type="text" class="form-control user-question" placeholder="What is your question?"> <button type="button" class="btn">Submit</button> </div>