Build a Chatbot with Vanilla JavaScript Getting Started Listening for events Creating User and Chatbot responses Updating our DOM element Video Conclusion

2025-05-28

使用 Vanilla JavaScript 构建聊天机器人

入门

监听事件

创建用户和聊天机器人响应

更新我们的 DOM 元素

视频

结论

最近，我访问了一个网站，在浏览过程中，网站的聊天机器人引起了我的注意。我一直在寻找新的项目，所以我研究了如何使用原生 JavaScript 构建一个聊天机器人。在从零开始构建这个项目的过程中，我遇到了许多基于现有知识的困难，我所说的“从零开始”是指我在构建过程中没有使用任何额外的库或 API。此代码基于现有的博客文章、文章和 YouTube 视频。另请注意，这个项目更多的是对 JavaScript 基础知识的深入理解，而不是任何形式的人工智能 (AI)或机器学习。理解本文的主要前提是了解 HTML、CSS 和原生 JavaScript。

入门

让我们创建一个文件夹来存放项目文件，大致分为三部分：HTML、CSS 和 JavaScript。然后，我们构建一个包含所有 HTML 组件的 HTML 基本文件：

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Chatbot</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="index.js" ></script>
</head>
<body>
  <h1>Chatbot</h1>
  <div id="container" class="container">
     <input id="input" type="text" placeholder="Say something..." autocomplete="off" />
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

我们将对我们的style.css文件执行相同的操作，为我们的应用程序添加样式：

  * {
          box-sizing: border-box;
    }

  html {
          height: 100%;
       }

  body {
          font-family: 'Poppins', sans-serif;
          background-color: #fff;
          height: 100%;
          margin: 0;
       }

 .container {
          width: 100%;
          height: 100%;
      }
Enter fullscreen mode Exit fullscreen mode

监听事件

首先，我们必须在脚本运行之前检查页面内容是否已加载，并且还需要一个键码，以便使用我们的enter键向聊天机器人发送消息。
为了实现这一点，addEventListener需要一种方法。每当指定的事件传递到目标时，该方法就会调用一个函数。我们addEventListener监听的两个事件是：

  • DOMContentLoaded- 当初始 HTML 文档已加载并解析时，无需等待样式表、图像和子框架完成加载，此事件就会触发。
  • keydown- 此事件针对所有键触发，无论它们是否产生字符值。

键盘事件代码

事件keydown是一个KeyboardEvent.code属性，它提供一个代码来指示用户按下了哪个键盘键。例如，小写字母“a”会被 和 报告为 65。keydown大写keyup字母“A”会被 和 两个事件报告为 65。
借助我们的keydown事件，我们可以创建一种通过按键向聊天机器人发送消息的有效方式enter。我们的聊天机器人会在每次按键addEventListener时监听并响应。enter

document.addEventListener("DOMContentLoaded", () => {
inputValue.addEventListener("keydown", (e) => {
      if (e.code === "Enter") {
        let input = inputValue.value;
        inputValue.value = "";
        output(input);
      }
    });
  });
Enter fullscreen mode Exit fullscreen mode

在上面的代码片段中，e.code === "Enter"表示直接分配给Enter按钮的键码 13。要了解更多关于键码的信息，请阅读对象KeyboardEvent。
用户的输入值被赋值给一个变量，我们稍后会用到它。最后要记住的是，在消息发送后清除或重置输入，.value = ""这样才能做到这一点。.reset()如果我们的输入字段是一个form标签，我们可以使用它，但遗憾的是，它不是。

创建用户和聊天机器人响应

编辑用户文本输入

接下来，我们将为我们的聊天机器人行为创建一个函数。

function output(input) {
    //remove all characters except word characters, space, and digits 
    let text = input.toLowerCase().replace(/[^\w\s]/gi, "").replace(/[\d]/gi, "").trim();
    text = text
      .replace(/ a /g, " ")   // replaces 'tell me a story' to 'tell me story'
      .replace(/i feel /g, "")
      .replace(/whats/g, "what is") // replaces "whats" to "what is"
      .replace(/please /g, "")
      .replace(/ please/g, "")
      .replace(/r u/g, "are you"); //replaces "r u" to "are you"
}
Enter fullscreen mode Exit fullscreen mode

我们的用户的输入值需要进行一些更改，以便我们的聊天机器人能够理解用户发送的消息，如上所示，为此，我们必须应用一些 JavaScript 方法，它们是：

  • toLowerCase() - 将输入值转换为小写。
  • 正则表达式和replace() - 这会删除非单词/空格字符和数字。例如，它会替换某些内容，例如whats uptowhat is up或r uto are you。如果用户输入what is going on、whats going on或what's going on，它们都会产生相同的有效机器人响应。
  • trim() - 修剪尾随空格。

创建一组数组

现在我们已经很好地了解了用户的文本输入将如何呈现，我们必须创建一组包含可能的用户文本的数组和另一个适当的聊天机器人响应数组。

const userTexts = [
    //0 
    ["hi", "hey", "hello", "good morning", "good afternoon", "good day"],
    //1
    ["how are you", "how is life", "how are things", "how are you doing", 
    "are you doing good", "are you fine", "how is your day going", "how is your day", 
    "what's up", "whats up", "you good"],
    //2
    ["what are you doing", "what is going on", "what is up", "how is your day", 
    "what's up", "whats up", "you good"],
    //3
    ["how old are you", "are you old"],
    //4
    ["who are you", "are you human", "are you bot", "are you human or bot"],
    //5
    ["who created you", "who made you", "were you created"]
  ]

  const botReplies = [
    //0
    ["Hello!", "Hi!", "Hey!", "Hi there!","Howdy"],
    //1
    [
      "Fine... and you?",
      "Pretty well, and you?",
      "Fantastic, and you?"
    ],
    //2
    [
      "Nothing much",
      "About to go to sleep",
      "Can you guess?",
      "I don't know actually"
    ],
    //3
    ["I am infinite"],
    //4
    ["I am just a bot", "I am a bot. What are you?"],
    //5
    ["The one true God, JavaScript"]
  ]
Enter fullscreen mode Exit fullscreen mode

当聊天机器人无法理解用户发送的消息时，我们需要创建一组备用数组。

 const alternative = [
   "Same",
   "Go on...",
   "Bro...",
   "Try again",
   "I'm listening...",
   "I don't understand :/"
   ]
Enter fullscreen mode Exit fullscreen mode

注意：如果需要，您可以添加额外的用户文本和回复。

比较并匹配用户和聊天机器人的响应

我们的聊天机器人功能仍然需要一个IF/ELSE语句来比较和匹配我们的数组以获得合适的答复，或者如果我们得到与我们的数组不匹配的用户输入，则产生替代答复userTexts。

function output(input) {
    if (compare(userTexts, botReplies, text)) { 
      // search for exact match in `userTexts`
      finalResult = compare(userTexts, botReplies, text);
    } else {
      // if everything else fails, bot produces a random alternative reply
      finalResult = alternative[Math.floor(Math.random() * alternative.length)];
    }
    // to update our HTML DOM element 
    addToChat(input, finalResult);
  }
Enter fullscreen mode Exit fullscreen mode

我们必须匹配用户数组和聊天机器人数组，使其看起来像用户与聊天机器人之间的对话。在上面的代码片段中，如果我们收到与 userTexts[0] 中的选项匹配的用户输入，例如“hi”或“hello”，机器人就会根据其自身位于 botReplies[0] 中的选项集，以此类推，给出相应的回复。现在，我们将添加匹配这两组数组的函数。

function compare(userTexts, botReplies, text) { 
  for (let x = 0; x < userTexts.length; x++) {
      for (let y = 0; y < botReplies.length; y++){
        if (userTexts[x][y] == text) {
          let replies = botReplies[x];
          let reply = replies[Math.floor(Math.random() * replies.length)];
        }
      }
    }
    return reply;
  }
Enter fullscreen mode Exit fullscreen mode

该函数的工作原理如下：首先，我们必须循环遍历 userTexts 数组的索引，然后再进行一次循环，检查用户的输入文本是否与该索引处的任何回复匹配。检查是否匹配后，我们将从可用的 botReplies 数组中随机选择一个相应的回复。

更新我们的 DOM 元素

最后，我们将更新 HTML DOM（文档对象模型），以便在用户或聊天机器人发送消息时显示我们的消息。使用该.appendChild方法，我们可以通过在每次发送消息时更新用户和聊天机器人字段来创建消息线程。

function addToChat(input, finalResult) {
    let userDiv = document.createElement("div");
    userDiv.id = "user";
    userDiv.className = "response";
    userDiv.innerHTML = `<span>${input}</span>
    messagesContainer.appendChild(userDiv)`;

    let botDiv = document.createElement("div");
    let botImg = document.createElement("img");
    let botText = document.createElement("span");
    botDiv.id = "bot";
    botImg.className = "avatar";
    botDiv.className = "bot response";
    botText.innerText = "Typing...";
    botDiv.appendChild(botImg);
    botDiv.appendChild(botText);
    messagesContainer.appendChild(botDiv);
}
Enter fullscreen mode Exit fullscreen mode

视频

我们正在使用的应用程序的演示

结论

按照本文中的步骤，您可以使用纯 JavaScript 构建一个聊天机器人。为了更好地理解和概览本文的代码库，您可以在Github
上查看。

文章来源：https://dev.to/ugwutotheeshoes/build-a-chatbot-with-vanilla-javascript-5akn
Devto 翻译
PREV
5 个 Docker 致命陷阱 😱 - 针对新用户 结束语
NEXT
初级开发人员远程工作清单