解析 <pre> 标签内的文本答案

【问题标题】：Parse text inside <pre> tag解析 <pre> 标签内的文本
【发布时间】：2019-08-08 07:11:46
【问题描述】：

我正在尝试制作一个简单的 Web 应用程序，它允许我上传文本文件并在标签中显示其内容。另外，当我按下“解析”按钮时，我需要文本内容只保留以“ACK”开头的所有行，同时保持其结构。

这是我的代码：

// Javascript App.js
document.getElementById("openFile").addEventListener("change", function(){
    var file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(){      
        document.getElementById("fileContents").textContent = this.result;      
    }
    
    fr.readAsText(file);
},false)



//error zone
document.getElementById("parse").addEventListener("click", function(){
    document.getElementById("fileContents").textContent.startsWith("ACK") = this.result;
},false)

<!DOCTYPE html>
<html lang="pt-pt">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Parser</title>

  </head>
  <body>
    <input type="file" id="openFile"/>
    <button id="parse">Parse</button>
    <br>
    <br>
    <br>
    <!-- preformatted text -->  
    <pre id="fileContents"></pre>
    <!--/preformatted text -->  

    <!-- app.js -->
    <script src="js/app.js"></script>  
  </body>
</html>

example off the output

【问题讨论】：

你能举一个输入文本文件内容的例子，以及预期的输出吗？
当然@CertainPerformance。想象一下，您有一个包含以下行的文本文件：
您可以将其编辑到您的问题中吗？（不进评论区，会看不懂）
当然抱歉....我从未使用过stackoverflow，所以我会尝试这样做
您能否将输入和预期输出编辑到您的问题中，以便我们有一个可运行的示例进行调试？（作为文本）

标签： javascript html html-parsing

【解决方案1】：

我唯一的更改是parse 按钮的事件侦听器。我解析了fileContents 的文本，所以当点击parse 时，只剩下以ACK 开头的行。

// Javascript App.js
document.getElementById("openFile").addEventListener("change", function(){
    var file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(){      
        document.getElementById("fileContents").textContent = this.result;      
    }
    
    fr.readAsText(file);
},false)



document.getElementById("parse").addEventListener("click", function(){
    let lines = document.getElementById("fileContents").textContent.split('\n');
    lines = lines.filter((line)=>line.indexOf('ACK')===0);
    let newPre = '';
    lines.map((line)=>{newPre+=line + '\n';});
    document.getElementById("fileContents").textContent = newPre;
},false)

<!DOCTYPE html>
<html lang="pt-pt">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Parser</title>

  </head>
  <body>
    <input type="file" id="openFile"/>
    <button id="parse">Parse</button>
    <br>
    <br>
    <br>
    <!-- preformatted text -->  
    <pre id="fileContents"></pre>
    <!--/preformatted text -->  

    <!-- app.js -->
    <script src="js/app.js"></script>  
  </body>
</html>

【讨论】：

如果我想获得带有 ACK 和 NMG 或 JKO 等字母的另一个组合的行，我该怎么做？
看看我使用过滤器的那一行。 Filter 是一个高阶函数，它返回包含满足条件的所有项目的新数组。现在的条件是第一个子字符串是否为 ACK。改成你想要的就行了
我不是说更改字符串“ACK”，而是添加另一个这样的字符串：lines = lines.filter ((line) => line.indexOf ('ACK') === 0 || line.indexOf('KMH') === 0);它不工作
只有当行以 ACK 或 KMH 开头时，您的示例才有效（因为您将索引与 0 进行比较）