javascript 从文本文件中获取随机行 - Javascript (1)

📌 相关文章

📜 javascript 从文本文件中获取随机行 - Javascript (1)

📅 最后修改于: 2023-12-03 15:01:41.335000 🧑 作者: Mango

Javascript - 从文本文件中获取随机行

有时我们需要从一个文本文件中随机获取一行数据，比如从一个名字列表中获取一个随机名字。这篇文章将介绍如何使用 Javascript 从文本文件中获取随机行。

读取文件

首先，我们需要知道如何读取一个文本文件。这可以通过使用 Javascript 中的 XMLHttpRequest 对象来实现。以下是一个简单的函数，可以将给定 URL 的文本内容读取到回调函数中：

function loadTextFile(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.open("GET", url, true);
  xhr.send();
}

使用这个函数，我们可以读取一个文本文件，并将其文本内容传递给回调函数。

获取随机行

一旦我们有了文本内容，就可以将其转换为一个字符串数组，然后从中随机获取一个元素。以下是一个函数示例，用于读取文本文件并返回其中的随机行：

function loadRandomLineFromTextFile(url, callback) {
  loadTextFile(url, function(text) {
    var lines = text.split("\n");
    var randomIndex = Math.floor(Math.random() * lines.length);
    callback(lines[randomIndex]);
  });
}

此函数将文本文件的 URL 和回调函数作为参数。它将文本文件的内容读取到字符串中，然后使用 split() 函数将其拆分为字符串数组。最后，它从数组中随机选择一个元素，并将其传递给回调函数。

示例

以下是一个使用示例，读取 names.txt 文件并在网页中显示随机选择的名称：

<!DOCTYPE html>
<html>
  <head>
    <title>随机名称</title>
  </head>
  <body>
    <h1>随机名称</h1>
    <p id="name"></p>
    <script>
      function displayRandomName() {
        loadRandomLineFromTextFile("names.txt", function(name) {
          document.getElementById("name").textContent = name;
        });
      }
      displayRandomName();
    </script>
  </body>
</html>

此示例定义了一个 HTML 页面，并使用 displayRandomName() 函数来显示一个随机名称。该函数通过调用 loadRandomLineFromTextFile() 函数来实现。当 HTML 页面加载时，该函数会自动执行，并将随机名称显示在 p 元素中。