How can I display a text file line by line via Javascript/AJAX?

Question

I am trying to read a text file from the server and display in a div on my web page. Here is my AJAX/Javascript:

    <body onload="loadXMLDoc()">
    <script>
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText.replace("\n", "<br />");
                }
            }
            xmlhttp.open("GET","ajax_info_test.txt?t=" + Math.random(),true);
            xmlhttp.send();
            setInterval (loadXMLDoc, 1000);
        }
    </script>
    <div id="myDiv"></div>
</body>

It only displays the first line in the text file on its own line. How can I do this for each line on its own?

Rich · Accepted Answer · 2013-02-25 22:14:43Z

3

As Brad M seems to incompletely answer, your problem is you are only replacing one line. Use the following to remove all \n and join with br tag instead.

xmlhttp.responseText.split('\n').join('<br/>');

answered Feb 25, 2013 at 22:14

Rich

2,9059 gold badges44 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christoph Riesterer Over a year ago

Thank you Rich for answering with a suggestion :)

Rich Over a year ago

This is best if one decides to do further processing to lines, like wrapping them in other html elements for style or doing processing. However if simply just replacing line breaks with html br element tags, the global replace that saganbyte suggested should be more efficient.

Christoph Riesterer Over a year ago

I will be using this to watch log files for updates in real time. I think your solution will work best. Thanks again!

Brad M · Accepted Answer · 2013-02-25 22:10:51Z

1

.replace only replaces the first instance of \n

document.getElementById("myDiv").innerHTML=xmlhttp.responseText.replace("\n", "<br />");

answered Feb 25, 2013 at 22:10

Brad M

7,9101 gold badge25 silver badges40 bronze badges

1 Comment

Brad M Over a year ago

There are already a multitude of posts on stackoverflow on javascript string replacement, I thought it would have been helpful to diagnose your error.

walmik · Accepted Answer · 2013-02-25 22:28:42Z

0

To replace \r, \n or \r\n globally:

var str = xmlhttp.responseText;
var replacedStr = str.replace(/\r\n|\r|\n/g,"<br />");
document.getElementById("myDiv").innerHTML = replacedStr;

edited Feb 25, 2013 at 22:28

answered Feb 25, 2013 at 22:20

walmik

1,4522 gold badges13 silver badges30 bronze badges

Collectives™ on Stack Overflow

How can I display a text file line by line via Javascript/AJAX?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related