0

我想从文本文件中提取一个字符串，将其转换为一个单词加扰器（我想出了那部分）并将其输出到另一个文本文件中。我找到了一些代码来输入文本文件并提取文本：

<html>
  <h4>Select un file con .txt extension</h4>
  <input type="file" id="myFile" accept=".txt" />
  <br /><br />
  <div id="output"></div>
  <script>
    var input = document.getElementById("myFile");
    var output = document.getElementById("output");
    input.addEventListener("change", function () {
      if (this.files && this.files[0]) {
        var myFile = this.files[0];
        var reader = new FileReader();

        reader.addEventListener("load", function (e) {
          output.textContent = e.target.result;
        });

        reader.readAsText(myFile);
      }
    });
  </script>
</html>

输入文本并提取文本文件

<html>
    <div>
      <input type="text" id="txt" placeholder="Write Here" />
    </div>
      <div>
        <input type="button"id="bt"value="Save in a File"onclick="saveFile()"/>
      </div>
  <script>
    let saveFile = () => {
      const testo = document.getElementById("txt");
      let data = testo.value;
      const textToBLOB = new Blob([data], { type: "text/plain" });
      const sFileName = "Testo.txt";
      let newLink = document.createElement("a");
      newLink.download = sFileName;
      newLink.href = window.URL.createObjectURL(textToBLOB);
      newLink.style.display = "none";
      document.body.appendChild(newLink);
      newLink.click(); 
    };
  </script>
</html>

但我不知道如何在第一个代码中输出一个字符串或如何将它连接到第二个代码。有人可以告诉我如何做到这一点或解释这些代码是如何工作的，以便我可以尝试用 JavaScript 自己做吗？

4

1 回答 1

0

我将对 JavaScript 的每一行进行注释，这应该有助于您理解。

<script>
    /*This creates a global variable with the HTML element input in it. */
    var input = document.getElementById("myFile"); 
    /*This creates a global variable with the HTML element div with id output in it. */
    var output = document.getElementById("output");
    /* this 2 lines are used to set the source and the destination.
    The first will get where you put your file, in this case it's the input element.
    The second will get the div which content will be replaced by the content of your txt file. */
    
    /* Here we tell to our input element to do something special when his value changes.
    A change will occur for example when a user will chose a file.*/
    input.addEventListener("change", function () {
      /* First thing we do is checking if this.files exists and this.files[0] aswell.
      they might not exist if the change is going from a file (hello.txt) to no file at all  */
      if (this.files && this.files[0]) {
        /* Since we can chose more than one file by shift clicking multiple files, here we ensure that we only take the first one set. */
        var myFile = this.files[0];
        /* FileReader is the Object in the JavaScript standard that has the capabilities to read and get informations about files (content, size, creation date, etc) */
        var reader = new FileReader();

        /* Here we give the instruction for the FileReader we created, we tell it that when it loads, it should do some stuff. The load event is fired when the FileReader reads a file. In our case this hasn't happened yet, but as soon as it will this function will fire. */
        reader.addEventListener("load", function (e) {
          /* What we do here is take the result of the fileReader and put it inside our output div to display it to the users. This is where you could do your scrambling and maybe save the result in a variable ? */
          output.textContent = e.target.result;
        });
        /* This is where we tell the FileReader to open and get the content of the file. This will fire the load event and get the function above to execute its code. */
        reader.readAsText(myFile);
      }
    });
  </script>

有了这个，我希望你能够理解这段代码的第一部分。尝试放置代码的第二部分而不是 output.textContent 并用 e.target.result 替换数据，这应该可以满足您的要求，但是我会让您先自己弄清楚，如果需要，请对此答案发表评论进一步的帮助！

这是一个带有工作和注释代码的代码笔： https ://codepen.io/MattDirty/pen/eYZVWyK

于 2020-09-07T13:59:30.227 回答