多行字符串在javascript上无法正确读取

时间:2014-02-19 00:22:19

标签: javascript string

我写了这段代码,其中包含一个多行字符串的文件(字符串var),每行包含许多用tab分隔的字段。 似乎javascript无法将行和字段分开>>当我试图打印字段时没有出现

怎么了?

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <script src="Scribl.min.js"></script>

        <script> 
        function draw(canvasName) {  
       // Get Canvas and Create Chart
       var canvas = document.getElementById(canvasName);    

       // Create Chart
       chart = new Scribl(canvas, 500);
    var file = '##gff-version 3 \n'+
'scaffold_1_A_acidus_CBS_106_47   AspGD  gene  61571     62909      .  +    .   ID=Aspfo1_0027407;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   mRNA    61571   62909   .   +   .   ID=Aspfo1_0027407-T;Parent=Aspfo1_0027407;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    61571   61698   .   +   .   ID=Aspfo1_0027407-T-E1;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    61801   61858   .   +   .   ID=Aspfo1_0027407-T-E2;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   exon    62049   62909   .   +   .   ID=Aspfo1_0027407-T-E3;Parent=Aspfo1_0027407-T\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 61571   61698   .   +   0   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 61801   61858   .   +   0   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   CDS 62049   62909   .   +   2   ID=Aspfo1_0027407-P;Parent=Aspfo1_0027407-T;parent_feature_type=ORF\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   gene    192322  193023  .   -   .   ID=Aspfo1_0027447;Note=Protein of unknown function\n'+
        'scaffold_1_A_acidus_CBS_106_47 AspGD   mRNA    192322  193023  .   -   .   ID=Aspfo1_0027447-T;Parent=Aspfo1_0027447;Note=Protein of unknown function\n';


    document.getElementById("demo").innerHTML=file;

          //gff3(file,chart);

            var lines = file.split("\n");  // array has the file lines, each lin has a feature >> we can pars each line now to extraxt the needed info
        var features = [];
        var max = undefined;
        var min = undefined;
        var version = undefined;

        // parse genes
        numFeatures = lines.length
        for( var j=0; j < numFeatures; j++ ) {
                if( lines[j] == "" ) break;
                if( lines[j] == "##" ) continue;
                // if it start of ## means extra info that provide meta-information about the document as a whole doc such as version //pragmas or meta-data


                var fields = lines[j].split("   ");//tab-delimited : parsers must split on tabs, not spaces. 
                //Fields are: <seqname/id> <source> <feature/type> <start> <end> <score> <strand> <frame> [attributes] [comments]

                if( fields[2] != "gene" ) continue;
                if (type == "gene"){// it is gene so draw it // else it is exone itron etc

                    var seqid = fields[0];
                    var source = fields[1];
                    var type = fields[2];
                    var start = parseInt(fields[3]);
                    var end = parseInt(fields[4]);
                    var score = fields[5];
                    var strand = fields[6];
                    var phase = fields[7];

                    var attributes = fields[8].split(";");
                    var geneID = attributes[0];
                    var GeneNama = attributes[1];

            chart.addGene( start , end, strand);
                    }

        }

       // Draw Chart
       chart.draw();

       // Create image of chart1
       var img = chart.canvas.toDataURL("image/png");
       // Add link to download image
          //document.getElementById('export').href = img;
    }

           </script>
        </head>

      <body onload="draw('canvas')"> <canvas id="canvas" width="750" height="330"></canvas>
        <p id="demo">hi</p>

      </body>
    </html>

2 个答案:

答案 0 :(得分:1)

空白崩溃。但是添加这个CSS:

#demo {white-space:pre-wrap}

和魔术! :d

答案 1 :(得分:0)

这些不是标签,但将var fields = lines[j].split(" ");更改为var fields = lines[j].split(/\s+/);应该可以解决问题。