現在HTML内でjavascriptを使い、外部のテキストファイルを読み込み、出力したいと考えています。

Question

現在HTML内でjavascriptを使い、外部のテキストファイルを読み込み、idの中に出力したいと考えています。

＊javascriptの中身＊

<!--
var xmlHttp;

function loadText(){
  if (window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }else{
    if (window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
      xmlHttp = null;
    }
  }
  xmlHttp.onreadystatechange = checkStatus;
  xmlHttp.open("GET", "text.txt", true);

  xmlHttp.send(null);
}


function checkStatus(){
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    var node = document.getElementById("disp");
    var ItemList = xmlHttp.responseText;
    node.innerHTML = ItemList;
    
    
  }
}

// -->

そして表示箇所

です！

テキストの内容なのですが↓

　　┏━┓
┃旬┣━┓　　　XXX
┗━┫刊┃━━━━━━━━━━━━━━━━2018.10.19━━●
┗━┛
━こんにちは━

となっております。
テキストをそのまま読み込み出力すると、

　　┏━┓ 　　┃旬┣━┓　　　XXX 　　┗━┫刊┃━━━━━━━━━━━━━━━━2018.10.19━━● 　　　　┗━┛ ━こんにちは━

となってしまい、テキストの中身が綺麗に出力されないのですが。

上記のscriptのどの部分を修正する必要がありますでしょうか？

何卒宜しくお願いいたします。

Answer 1

ふつうのHTML環境では、改行は単なるスペースと同じ扱いになります。そして、複数のスペースも1個になってしまいますので、スペースで位置合わせするメールのような場合、うまく位置が揃いません。

入れる<div>にwhite-space: preをかけて、スペースも改行もそのまま表示するモードにしておきましょう。

Comments

[daiti916]

思い通りのことができました。

ありがとうございます！

Answer 2

IE限定ですか？

• 改行マークを<br>に変換するか
• 表示領域に対してCSSで以下を指定するかでしょう

white-space: pre;

Comments

[daiti916]

chromeで作業しておりました。

教えていただいた方法で、やりたいことができました！

先に回答していただけました、maisumakunさんを今回ベストアンサーとさせていただきました。

ありがとうございます。