时间戳

首页 > 解决方案 > 为什么不能改变文本行的颜色？将纯文本更改为 HTML

javascript - 为什么不能改变文本行的颜色？将纯文本更改为 HTML

问题描述

我正在尝试将包含“已接受”的文本行的颜色更改为绿色，将所有其他文本行的颜色更改为红色，但是当我上传文件时，所有行都是绿色的。我究竟做错了什么？我真的不知道为什么不读取 else 语句。

在此处输入图像描述

document.getElementById("openFile").addEventListener("change", function(){
    var file = this.files[0];
    var fr = new FileReader();
    
    fr.onload = function(){ 
        document.getElementById("fileContents").textContent = this.result;  
        let lines = document.getElementById("fileContents").textContent.split('\n');
        let parser ='';       
        for(let line = 0; line < lines.length; line++){
            if (lines[line].substring(0,3)==="ACK"){
                parser += lines[line].substring(0,3) + "\t"  + lines[line].substring(49,108).trim() + "\t" + lines[line].substring(109,115) + "\t" + lines[line].substring(149,159).replace(/as/gi,"\tAccepted").replace(/rj/gi,"\tRejected") + '\n';
            }
            else if (lines[line].substring(0,3)==="MSG"){
                parser += lines[line].substring(0,3) + "\t" + lines[line].substring(35,159).replace(/,/,"").trim() + '\n';
            }
        }       
        document.getElementById("fileContents").textContent = parser;
        
        if (parser.includes("Accepted")){
            document.getElementById("fileContents").style.color = "#00FF00";
        }
        else {
            document.getElementById("fileContents").style.color = "#FF0000";
        }
    }  
    fr.readAsText(file);
},false)
<!DOCTYPE html>
<html lang="en">
  <head>
    <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"/>
    <br>
    <br>
    <br> 
    <pre id="fileContents"></pre>

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

在@aptriangle 的建议之后，我尝试替换由 HTML 元素生成的每一行文本，在这种情况下，每个子字符串都应该是 . 我坚持这一点，我无法做出必要的改变。有人可以帮我吗？先感谢您。

document.getElementById("openFile").addEventListener("change", function(){
    var file = this.files[0];
    var fr = new FileReader();
    
    fr.onload = function(){ 
        document.getElementById("fileContents").textContent = this.result;  
        
        let lines = document.getElementById("fileContents").textContent.split('\n');
        let parser =''; 
        
        for(let line = 0; line < lines.length; line++){
            if (lines[line].substring(0,3)==="ACK"){
                
                var sub1 = lines[line].substring(0,3) + '\t';
                var sub2 = lines[line].substring(49,108) + '\t';
                var sub3 = lines[line].substring(109,115) + '\t';
                var sub4 = lines[line].substring(149,lines.length).replace(/as/gi,"\tAccepted").replace(/rj/gi,"\tRejected").trim() + '\n';
                
                var tdata1,tdata2,tdata3,tdata4 = document.createElement("td");
                tdata1.createTextNode(sub1);
                tdata2.createTextNode(sub2);
                tdata3.createTextNode(sub3);
                tdata4.createTextNode(sub4);
                parser += tdata1 + tdata2
                    + tdata3 + tdata4;
                var element = document.getElementById("fileContents");
                element.appendChild(parser);
            }
            else if (lines[line].substring(0,3)==="MSG"){
                var sub1 = lines[line].substring(0,3) + '\t';
                var sub2 = lines[line].substring(35,lines.length).replace(/,/,'').trim() + '\n';
                
                parser += sub1 + sub2;
            }     
        }
        document.getElementById("fileContents").textContent = parser;
        
         
    }  
    fr.readAsText(file);
},false)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Parser</title>
  </head>
  <body>
    <input id="openFile" class="btn btn-light" type="file" />
    <br>
    <br>
    <br>
    <div id="header" class="font-weight-bold"></div>
    <pre id="fileContents" class="font-weight-bold"></pre>

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

上传代码时我仍然无法放置段落......现在我做错了什么？很抱歉打扰，但我真的想不通。

document.getElementById("openFile").addEventListener("change", function(){
    let file = this.files[0];
    let fr = new FileReader();
    
    fr.onload = function(){ 
        let content = document.getElementById("fileContents");
        content.textContent = this.result;  
        
        let lines = content.textContent.split('\n');
        let parser = ''; 
        let para;
        
        for(let line = 0; line < lines.length; line++){
            
            para = document.createElement("p")
            para.innerHTML = lines[line];
            
            if (lines[line].substring(0,3)==="ACK"){    
                let sub1 = lines[line].substring(0,3) + '\t';
                let sub2 = lines[line].substring(49,108) + '\t';
                let sub3 = lines[line].substring(109,115) + '\t';
                let sub4 = lines[line].substring(149,lines.length).replace(/as/gi,"\tAccepted").replace(/rj/gi,"\tRejected") + '\n';
                
                parser += sub1 + sub2 + sub3 + sub4;
            }
            else if (lines[line].substring(0,3)==="MSG"){
                let sub1 = lines[line].substring(0,3) + '\t';
                let sub2 = lines[line].substring(35,lines.length).replace(/,/,'').trim() + '\n';
                
                parser += sub1 + sub2;    
            } 
            content.appendChild(para);
        }
        content.textContent = parser;
    }  
    fr.readAsText(file);
},false)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Parser</title>
  </head>
  <body>
    <input id="openFile" class="btn btn-light" type="file" />
    <br>
    <br>
    <br>
    <pre id="fileContents" class="font-weight-bold"></pre>

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

标签： javascripthtmlarrayscolors

解决方案

这是一个显示工作拆分和样式的小提琴：https ://jsfiddle.net/4qv3h0xp/

var element;
for (var i = 0; i < split.length; i++) {
  element = document.createElement("p");
  element.innerHTML = split[i];
  if (split[i].indexOf("Accepted") == -1) {
    element.style.color = "#00FF00";
  }
  else {
    element.style.color = "#FF0000";
  }
  output.appendChild(element);
}

它为每一行创建一个新元素并将元素附加到父元素，而不是设置父元素的样式。

推荐阅读