如何从.txt文件中提取内容并在HTML中显示它的随机行？

Question

Being a noob at HTML, I only know a solution to this in C#. I'm just trying to separate each line of the .txt so I can randomly pull lines from it and display them when a button is pressed. In addition, rather than using a submit button, I wanted to create a div of my own styled button for the user to press. (Which I know how to do) and use a jQuery 'on click'.

I'm a little unsure how to describe exactly what I'm trying to do, but I hope I did it well enough.

Thank you guys in advance.

Note This is the C# I used to create a relatively simple Trivia game. In a separate Trivia.cs I had split the question and answers from each other (In the .txt they were separated by an *)

I'm not sure if this will help guide anyone, however.

static List GetTriviaList() { //Get Contents from the file. Remove the special char "\\r". Split on each line. Convert to a list. List contents = 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

Here's a working Plunker showing how you could do it with just JavaScript (using the jQuery library).

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

The basic process is as follows:

1. Fetch the text file from the server
2. Split it into an array of lines
3. When the user clicks the button, generate a random number
4. Display the line corresponding to the random number

Here's the JavaScript for that (see the Plunker above for full source):

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]);
      });
    }
  });
});

UPDATE: Added some explanatory comments to the JavaScript (updated above and in the Plunker). Also added a check to prevent getting the same random line twice in a row.

Answer 2

I strongly suggest you to use server-side language, like PHP. Otherwise you will not be able to read only one word or string from the file. The javascript works in browser and to parse a file, as a first step, it would need the file fully loaded into the browser.

PS

Based on the task I would not recommend you to use JQuery or Javascript. Most likely this task would mean a protection, as in early years, this way was used to activate a copy of purchased software. Presumably, the soft was bought with instruction and the activation algorithm demand word from instruction pointing page number, row number and number of the word in a row. In the case of Javascript - all this mechanism would be working on client site. It would need to load the file fully and parse it in browser where every one would debug it and extract the secret text fully. It would be an easy to crack protection.