纯JS实现关键词检测回复时出现finalKey.contains is not a function错误如何解决

你遇到的报错由多个问题共同导致：

• JavaScript 字符串本身不存在contains实例方法，该方法是DOM节点用于判断是否包含子节点的API，字符串判断子串存在需要使用includes()方法。
• 你将输入值获取逻辑写在了regis函数外部，页面加载完成后就会立刻读取输入框默认的空值，后续点击按钮时finalKey永远是空字符串，不会拿到用户最新输入的内容。
• 语法逻辑错误：includes("Hi" || "H")这种写法不会实现「匹配Hi或H」的效果，逻辑或||会直接返回第一个真值Hi，实际只会判断是否包含Hi一个关键词。
• 你已经将输入内容全转为大写，但匹配的关键词还是小写的Hi、Bye，大小写不匹配永远无法命中判断条件。

优化后完整可运行代码 #

<html>
<div>
  <p id="iOut">🧰</p>
</div>
<div>
  <input id="uIn" value="">
</div>
<button onclick="regis()">SUBMIT</button>

<script>
  function regis() {
    // 每次点击都获取最新输入并转大写
    const userInput = document.getElementById("uIn").value.toUpperCase();
    // 关键词分组，后续新增关键词直接往对应数组加即可
    const helloKeys = ["HI", "H"];
    const byeKeys = ["BYE", "GOODBYE"];
    
    if (helloKeys.some(key => userInput.includes(key))) {
      document.getElementById("iOut").innerHTML = "HEY";
    } else if (byeKeys.some(key => userInput.includes(key))) {
      document.getElementById("iOut").innerHTML = "Okay";
    } else {
      document.getElementById("iOut").innerHTML = "🧰 Try again";
    }
  }
</script>

</html>

修改说明 #

• 将输入值获取逻辑移入regis函数内部，每次点击按钮都读取用户最新输入的内容
• 替换contains为字符串可用的includes方法
• 采用数组+some()方法做多关键词匹配，后续新增关键词只需要往对应分组的数组里加对应大写的关键词即可，不需要修改判断逻辑
• 匹配用的关键词统一使用大写，和输入内容的大小写格式对齐
• 修正了HTML中不存在的<p1>标签为标准的<p>标签，去除了<input>的错误闭合写法

内容的提问来源于stack exchange，提问作者One Amaro