如何從.txt文件中提取內容並在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中和上方更新）。 還添加了一項檢查，以防止連續兩次獲得相同的隨機行。

Answer 2

我強烈建議您使用服務器端語言，例如PHP。 否則，您將只能從文件中讀取一個單詞或字符串。 javascript可在瀏覽器中工作並解析文件，作為第一步，它需要將文件完全加載到瀏覽器中。

PS

根據任務，我不建議您使用JQuery或Javascript。 這項工作很可能意味着一種保護，因為在早期，這種方法被用來激活購買的軟件的副本。 大概是用指令購買了軟件，並且激活算法從指令指向的頁號，行號和連續字的編號中要求字。 對於Javascript，所有這些機制都可以在客戶端站點上使用。 它需要完全加載文件並在瀏覽器中解析它，每個人都將對其進行調試並完全提取秘密文本。 這很容易破解。