如何用原生JavaScript检测用户输入文本中的指定字符串片段？

你的需求是验证用户输入的问题是否包含指定疑问词片段，无需完全匹配。以下是修正后的实现方案：

完整代码示例 #

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>

修改后的JavaScript代码 #

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

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

button.addEventListener('click', validQuestion);

function validQuestion() {
  // 将输入文本转为小写，避免大小写匹配问题
  const inputText = question.value.toLowerCase();
  // 使用some()遍历数组，只要有一个疑问词被包含就返回true
  const isValid = questionWords.some(word => inputText.includes(word));
  console.log(isValid ? 'good question' : 'bad question');
};

关键说明 #

1. 为什么之前的写法无效：
   你之前用questionWords.indexOf(question.value)或questionWords.includes(question.value)，是在检查整个输入值是否存在于疑问词数组中，只能匹配用户输入完全等于某个疑问词的场景（比如只输入"what"），无法匹配包含疑问词的完整句子。

2. some()方法的作用：
   Array.some()会遍历数组中的每个元素，只要有一个元素满足回调函数的条件，就会立即返回true，完美契合你的需求——只要输入包含任意一个疑问词片段就算有效。

3. 大小写处理：
   加入toLowerCase()将输入文本统一转为小写，确保用户输入"What"或"HOW"这类大小写变体时，也能正确匹配数组中的小写疑问词。

内容的提问来源于stack exchange，提问作者Daithí