Оберните текст внутри contenteditable div в каждой строке

Question

Я работаю над чем-то вроде веб-среды на C++. У меня возникла некоторая проблема, когда я попытался добавить текстовый файл в свой контентный div (открыть файл). Структура DOM должен быть чем-то вроде

<div id = "board_code"> 
    <div>text in row1</div> 
    <div>text in row2</div> 
    <div>text in row3</div> 
</div> 

JS

function readSingleFile(evt) { 

    var f = evt.target.files[0]; 
     console.log(f); 
     if (!f) { 
     alert("Failed to load file"); 
      return; 
    } 
     if (f.name.indexOf('.txt') == -1) { 
      alert(f.name + " is not a valid text file."); 
      return;  
        }  

     var r = new FileReader(); 
     r.onload = function(e) { 
      var contents = e.target.result; 
      contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\r\n/,'<br>');; 
     alert("Got the file.n" 
       +"name: " + f.name + "n" 
       +"type: " + f.type + "n" 
       +"size: " + f.size + " bytesn" 
       + "contents: " + contents 
     ); 
      document.getElementById('board').innerHTML = contents; 
     } 
     r.readAsText(f); 

    } 

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 

http://jsfiddle.net/88vtR/32/

Как бы я обернуть текст в DIV каждую строку перед добавлением его в DOM?

Answer 1

Вы можете попробовать следующее ...

function readSingleFile(evt) { 

     var f = evt.target.files[0]; 
     //console.log(f); 
     if (!f) { 
      alert("Failed to load file"); 
      return; 
     } 
     if (f.name.indexOf('.txt') == -1) { 
      alert(f.name + " is not a valid text file."); 
      return; 
     } 

     var r = new FileReader(); 
     r.onload = function (e) { 
      var contents = e.target.result; //.replace("\r\n","<br/>"); 
      contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); 
      alert("Got the file.n" + "name: " + f.name + "n" + "type: " + f.type + "n" + "size: " + f.size + " bytesn" + "contents: " + contents); 


      var tmpSent = ""; 
      var newContents = ""; 
      for (var i = 0; i < contents.length; i++) { 
       if(contents.charAt(i) == '\n') { 
        newContents += "<div>"+tmpSent+"</div>"; 
        tmpSent = ""; 
       } 
       else 
        tmpSent += contents.charAt(i); 
      }; 
      if(tmpSent.length>0) 
        newContents += "<div>"+tmpSent+"</div>"; 

      console.log(newContents); 
      document.getElementById('board').innerHTML = newContents; 
     } 
     r.readAsText(f); 

    } 

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 

Вот ссылка скрипку ... jsfiddle