在Javascript中加载文本文件会添加意外的额外隐藏字符

Question

Maybe it's just the extreme lack of sleep, but I can't figure out why this is happening. I have a text file of 4 letter words, one on each line as follows:

text
lolz
test
word

When I try to load this file into an array line by line, I get strings that are 5 characters long!

var request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onloadend = function()
{
    var wordList = request.response;
    wordList = wordList.split('\n');

    console.log(wordList[2].length);
}
request.send();

I'm using Notepad++ to edit, and I see that there are no spaces at the end of each line. The sting.split() function is supposed to remove the characters the string is split by, so the extra characters shouldn't be '\\n'. Using the console.log in Chrome, I can't determine what the extra character actually is. There appears to be none!

Answer 1

This can be an odd problem if you've never run into it before. Sometimes not only an '\\n' character is included for a new line (which you seem to be familiar with already) but an '\\r' character for a "carriage return" as well. This is meant to represent how typewriters would need to move all the way back to the left, in addition to skipping down a space, to begin a new line. I'm not sure you can predict when you'll get carriage returns... It could be platform specific? Or maybe text editor specific? Perhaps someone with real knowledge can expand this answer.

Anyway, for now, try adding a trim() to each of your entries, which should get rid of the hidden '\\r' that you can't see, as follows:

var request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onloadend = function()
{
    var wordList = request.response;
    wordList = wordList.split('\n');

    for(var i = 0; i < wordList.length; i++)
        wordList[i] = wordList[i].trim();

    console.log(wordList[4].length);
}
request.send();

Answer 2

I had the same sort of problem when splitting a date string; an extra 'non-visible' character was added to the beginning and end of each array item; string.trim() did not work.

Took me 2 days to work the following out:

Created the datetime array from:

        var datetime = new Date();
        var dt = datetime.toLocaleString();
        var datetimearray=dt.split(" ");

Created date and time strings from the datetime array:

        var date=datetimearray[0];
        var time=datetimearray[1];

Split the date and time strings:

        var datearray=datetimearray[0].split("/");
        var timearray=datetimearray[1].split(":");

Then converted each date and time element to a number:

        var day =  getNumberFromString(datearray[0]);
        var month= getNumberFromString(datearray[1]);
        var year = getNumberFromString(datearray[2]);
        var hour =  getNumberFromString(timearray[0]);
        var minute= getNumberFromString(timearray[1]);
        var second = getNumberFromString(timearray[2]);

The getNumberFromString function:

    function getNumberFromString(string)
    {
        var stringsplit=string.split("");
        var stringlen=string.length;  // If it is the year part of the date, the length is 6
        switch(stringlen)
        {
             case 3:  // The last part of the time element (seconds) is only 3 for some reason
             case 4:  // The two character elements (day, month, hour, minute) are length 4 after the split
               var string1=stringsplit[1];  // create the first needed character from second array element; index 1
               var string2=stringsplit[2];  // create the second needed character from third array element; index 2

               string=string1+string2;  //add the 2 new elements together
               return parseInt(string); //convert the number as a string to a number

            case 6:  // For the date string; similar to the above 
              string1=stringsplit[1];
              string2=stringsplit[2];
              string3=stringsplit[3];
              string4=stringsplit[4];
              year1=string1+string2;
              year1num=parseInt(year1);
              year2=string3+string4;
              year2num=parseInt(year2);
              return [year1,year2];            
        }
    }

Finally created a lookup array to use for some encryption:

    var lookup=[day,month,year1,year2,hour,minute,second];

If anyone can show me a shorter way, I would be grateful.