使用 JS 从文本文件中检索随机选择的数据答案

【问题标题】：Retrieving a random selection of data from a text file using JS使用 JS 从文本文件中检索随机选择的数据
【发布时间】：2021-01-05 10:55:55
【问题描述】：

我想知道是否有人可以提供帮助，我什至不确定这是否完全有可能，但希望可以。

只是为了解释我想要实现的目标 - 我正在寻找一个简单的 HTML 页面，用户单击“生成”按钮并从文本文件中检索随机选择的行 - 随机排列和随机数每次单击按钮时都会显示一行。

为了更好的解释 - 我正在构建一个带有演员和角色名称的 Credits 生成器。每次按下“生成”时，它都必须是唯一的。

这是我作为起点的东西，但问题是它每次只返回一个条目，但我正在努力实现这一目标。

index.html


  <head>
    <meta charset="utf-8" />
    <title>Cast List Generator</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Cast List Generator</h1>
    <button id="showLine">Generate</button>
    <p id="list"></p>
  </body>

</html>

script.js

    var lines;
    var randomNumber;
    var lastRandomNumber;
    
    $(document.body).ready(function () {
      
      // load the trivia from the server
      $.ajax({
        url: 'list.txt'
      }).done(function(content) {
        
        // normalize the line breaks, then split into lines
        lines = content.replace(/\r\n|\r/g, '\n').trim().split('\n');
        
        // only set up the click handler if there were lines found
        if (lines && lines.length) {
          $('#showLine').on('click', function () {
            // loop to prevent repeating the last random number
            while (randomNumber === lastRandomNumber) {
              randomNumber = parseInt(Math.random() * lines.length);
              // check to prevent infinite loop
              if (lines.length === 1) { break; }
            }
            // keep track of the last random number
            lastRandomNumber = randomNumber;
            
            // show the corresponding line
            $('#list').text(lines[randomNumber]);
          });
        }
      });
    });

list.txt（将达到 100+）

Actor1 as Character 1
Actor2 as Character 2
Actor3 as Character 3
Actor4 as Character 4
Actor5 as Character 5
Actor6 as Character 6
Actor7 as Character 7
Actor8 as Character 8
Actor9 as Character 9
Actor10 as Character 10
Actor11 as Character 11

将不胜感激任何提示:)

【问题讨论】：

看看这个问题：stackoverflow.com/questions/13392059/…
您成功返回了一个随机文本行。但是您想返回几个（其中几个是随机数），那么为什么不创建另一个随机数作为要返回的行数，并循环获取下一个随机行 - 当然您需要记住您的行数已经有这个时间了，每次都不会显示超过一次。

标签： javascript html

【解决方案1】：

海沃氏理念的实现可能会奏效：

let startingLineNumber;
let lastStartingLineNumber;
let amountOfLines;
let lastAmountOfLines;

$(document.body).ready(function () {
  
  // load the trivia from the server
  $.ajax({
    url: 'list.txt'
  }).done(function(content) {
    
    // normalize the line breaks, then split into lines
    lines = content.replace(/\r\n|\r/g, '\n').trim().split('\n');
    
    // only set up the click handler if there were lines found
    if (lines && lines.length) {
      $('#showLine').on('click', function () {
        do {
          startingLineNumber = Math.floor(Math.random() * lines.length);
          const remaingLinesToEnd = lines.length - startingLineNumber;
          amountOfLines = Math.ceil(Math.random() * remaingLinesToEnd);

          // check to prevent infinite loop
          if (lines.length === 1) { break; }
        } while (startingLineNumber === lastStartingLineNumber && amountOfLines === lastAmountOfLines);
        // keep track of the last random number
        lastStartingLineNumber = startingLineNumber;
        lastAmountOfLines = amountOfLines;
        // show the corresponding line
        const actors = lines.slice(startingLineNumber, startingLineNumber + amountOfLines).join(", ");
        $('#list').text(actors);
      });
    }
  });
});

【讨论】：

非常感谢您提供此代码，它似乎几乎可以按照我的意愿工作！有没有一种简单的方法可以修改，以便每个字符串显示在新行上而不是彼此相邻显示结果？ i.imgur.com/LjKlT82.jpg
Offcourse，将 .join(", ") 更改为 .join("
")，这将在数组的每个元素之间放置一个断线，并且，接受注入 html 内容, 将 .text(actors) 更改为 .html(actors)