解析 <pre> 标签内的文本

Question

我正在尝试制作一个简单的 Web 应用程序，它允许我上传文本文件并在标签中显示其内容。此外，当我按下 "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)



//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

Answer 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>

解析 <pre> 标签内的文本

Parse text inside <pre> tag

html

javascript

html-parsing