javascript - すべての行で contenteditable div 内にテキストをラップします

Question

私は C++ Web ベースの IDE のようなものに取り組んでいます。contenteditable 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/

テキストを DOM に追加する前に、すべての行を div でラップするにはどうすればよいですか?

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