javascript - 如何从 .t​​xt 文件中提取内容并在 HTML 中显示其中的随机行？

Question

作为 HTML 菜鸟，我只知道用 C# 解决这个问题。我只是想将 .txt 的每一行分开，这样我就可以从中随机提取行并在按下按钮时显示它们。此外，我没有使用提交按钮，而是想创建一个我自己的样式按钮的 div 供用户按下。 (我知道该怎么做)并使用 jQuery“点击”。

我有点不确定如何准确描述我正在尝试做的事情，但我希望我做得足够好。

提前谢谢你们。

注意 这是我用来创建相对简单的 Trivia 游戏的 C#。在一个单独的 Trivia.cs 中，我将问题和答案彼此分开(在 .txt 中，它们由 * 分隔)

不过，我不确定这是否有助于指导任何人。

静态列表 GetTriviaList() { //从文件中获取内容。删除特殊字符“\r”。在每一行上拆分。转换为列表。 列表内容 = File.ReadAllText("trivia.txt").Replace("\r", "").Split('\n').ToList();

        //Each item in list "contents" is now one line of the Trivia.txt document.

        //make a new list to return all trivia questions
        List<Trivia> returnList = new List<Trivia>();
        // TODO: go through each line in contents of the trivia file and make a trivia object.
        //       add it to our return list.
        // Example: Trivia newTrivia = new Trivia("what is my name?*question");
        //Return the full list of trivia questions
        foreach (var item in contents)
        {
            Trivia bestTrivia = new Trivia(item);
            returnList.Add(bestTrivia);
        }

        return returnList;
    }

Answer 1

这是一个有效的 Plunker，展示了如何仅使用 JavaScript(使用 jQuery 库)完成它。

http://plnkr.co/edit/BUCZOKd0MFDsa2jdMkJs?p=preview

基本流程如下:

1. 从服务器获取文本文件
2. 将其拆分成一行行
3. 当用户点击按钮时，生成一个随机数
4. 显示随机数对应的行

这是用于此的 JavaScript(完整源代码请参见上面的 Plunker):

var lines;
var randomNumber;
var lastRandomNumber;

$(document.body).ready(function () {

  // load the trivia from the server
  $.ajax({
    url: 'trivia.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
        $('#trivia').text(lines[randomNumber]);
      });
    }
  });
});

更新:向 JavaScript 添加了一些解释性注释(在上面和 Plunker 中更新)。还添加了一个检查以防止连续两次获得相同的随机行。