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

How do I pull contents from a .txt file and display a random line of it in HTML?

本文关键字：显示 随机 HTML 一行 txt 文件 提取      更新时间：2023-09-26

作为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;
    }

这里有一个正在工作的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中更新）。还添加了一个检查，以防止连续两次获得相同的随机行。

我强烈建议您使用服务器端语言，比如PHP。否则，您将无法从文件中只读取一个单词或字符串。javascript在浏览器中工作，要解析文件，首先需要将文件完全加载到浏览器中。

PS

根据任务，我不建议您使用JQuery或Javascript。这项任务很可能意味着一种保护，就像早年一样，这种方式被用来激活购买软件的副本。据推测，该软件是用指令购买的，激活算法从指令指向的页码、行号和一行中的单词数中要求单词。在Javascript的情况下，所有这些机制都将在客户端站点上工作。它需要完全加载文件，并在浏览器中解析它，每个人都会在浏览器中调试它并完全提取秘密文本。这将是一个容易破解的保护。

相关文章：