Line endings in Javascript

Tweet

I spent much of today fighting with line endings in Javascript, and eventually turned up some results which are well worth sharing – if only to save other developers from descending in to the same debugging black hole.

As you may know, the humble line break actually has three forms depending on which operating system is doing the breaking. On Unix machines, a single newline character ‘n’ does the job. On Macs, a carriage return ‘r’ is used. DOS and Windows use both: ‘rn’. It’s one of those relatively subtle issues that can bite you hard if you don’t know what to look out for.

Today, I was tasked with the simple problem of building a Javascript function to turn single newlines in to double newlines within a textarea. My first attempt looked like this:


var doublenewlinesRE = /([^n])n([^n])/g;
function doublenewlines(obj) {
obj.value = obj.value.replace(doublenewlinesRE, "$1nn$2");
}

Double newlines

The above code uses a simple regular expression which finds all instances of something that is NOT a newline, followed by a newline, followed by something else that isn’t a newline. Instances of this pattern are then replaced by the same pattern with two newlines in the middle instead of one.

This worked fine in Firefox on both Windows, Linux and Mac because Firefox treats newlines as ‘n’ no matter what platform it runs on. It broke on IE for Windows and IE for Macintosh because those browsers use ‘rn’ and ‘r’ respectively.

Fair enough. The usual solution to this problem is to normalise the line endings before running the conversion, by replacing each of the three combinations with the single ending of your preference (in my case ‘n’). Here’s my second attempt at the function:


function doublenewlines(obj) {
obj.value = obj.value.replace(/(rn|r|n)/g, 'n');
obj.value = text.replace(doublenewlinesRE, "$1nn$2");
}

That didn’t work either. After much head scratching, debugging and poking around with alert boxes I finally uncovered an undocumented and almost mind numbingly obscure “feature” of Internet Explorer: When you assign a string to the value attribute of an input object, IE silently converts your nice ‘n’ line endings to the platform preference. Microsoft’s documentation fails to note this, but I’ve confirmed that this happens on both Windows and Mac versions of Internet Explorer.

Bizzarely, if you assign to the value attribute of a hidden form field object no conversion takes place; the line endings are only changed if you assign to a text area.

The following code, although seemingly identical in function to the code just listed, does exactly what I want it to do:


function doublenewlines(obj) {
var text = obj.value;
text = text.replace(/(rn|r|n)/g, 'n');
obj.value = text.replace(doublenewlinesRE, "$1nn$2");
}

This works fine because the normalised version is assigned to a variable rather than being assigned directly to the textarea object’s value attribute – hence IE’s automagical line ending conversion is delayed until the end of the script and fails to play havoc with my second regular expression.

Finally, a note on style. If I’d been thinking about code reuse rather than working quickly to solve a problem, I would probably have come up with something like this:


function doublenewlines(text) {
text = text.replace(/(rn|r|n)/g, 'n');
return text.replace(doublenewlinesRE, "$1nn$2");
}

Double newlines

Although it requires a bit more code in the onclick handler, abstracting away just the string operation I would have completely avoided the weird line ending conversion problem. Still, at least I’ve come away with understanding of another of IE’s little quirks.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chris Adams

    Why not simply obj.value.replace(/(rn|r|n)/g, ‘$1$1′) to double whatever was already there?

  • dfraize

    I would love to see more CSS design tips and tricks in this section. Great stuff so far!

  • http://simon.incutio.com/ Skunk

    Chris: because I didn’t want any existing double newlines to be turned in to quadrupal newlines.

  • Danny

    How about obj.value.replace(/([rn]{1}|[r]{1}|[n]{1})/g, ‘$1$1′)

    Would that work in javascript?

  • Jesse Ruderman

    I had a similar problem when I added a feature to http://www.squarefree.com/jsenv/ that makes it select the line on which an error occurred. Browsers give me the line number, and I have to convert that to a range of character numbers corresponding to the line in order to select the line. I think my code works for any browser that uses
    or
    , but not for browsers that use
    .

  • Jesse Ruderman

    I had a similar problem when I added a feature to http://www.squarefree.com/jsenv/ that makes it select the line on which an error occurred. Browsers give me the line number, and I have to convert that to a range of character numbers corresponding to the line in order to select the line. I think my code works for any browser that uses
    or
    , but not for browsers that use
    .

  • http://www.peterbailey.net beetle

    I admit, I wouldn’t have gotten this right the first time, but I don’t see why you can’t combine your patterns into one.

    ————

    function formatTextArea( ta )
    {
    ta.value = ta.value.doubleNewlines();
    }

    String.prototype.doubleNewlines = function()
    {
    return this.replace( /([^n])(?:r?n|r){1,2}([^n])/g, ‘$1nn$2′ );
    }

  • http://www.peterbailey.net beetle

    Sorry, posted an old verion of my string method. Here’s the one that should be used

    ——————

    String.prototype.doubleNewlines = function()
    {
    return this.replace( /(r?n|r){1,2}/g, ‘nn’ );
    }

  • Ben Eveling

    I have a similar problem which I am on the verge or giving up on. This is my last hope…

    I’ve built a basic font formatter for IE Win using a textarea, IE textrange, regular epxressions. It’s fine except that when I select some text to format, and that text includes a newline, but not anything from the line below i.e. the newline is the last thing selected, IE cannot see the newline or any part of it. It acts ast though there is no newline present and deletes it when adding the formatting tag.

    My demo is local at the moment, but I was wondering whether anyone had come across missing newlines like this before.

  • Anonymous

    this is a text area and its loses it focus on much heated concentrated daily values

  • Lucas

    It seems some of you will find this useful. I was having trouble validating <textarea>‘s until I used an intermediate string which browsers will not meddle with, then if necessary let your server do the line-ending conversions. Obviously this is a very specific implementation but you get the idea.

     function charCount(sourceElem)
     {
      var target=document.getElementById(sourceElem.name+'_count'),
          inputText=sourceElem.value,
          maxLength=500;
      inputText=inputText.replace(/[rn]+/g,'rn');
      if(inputText.length>=maxLength)
      {
       target.className='error';
       if(inputText.length>maxLength)
       {
        alert('You have gone over the limit,nthe end of your input will be trimmed to fit.');
        inputText=inputText.substring(0,maxLength);
        //fix for
        if(inputText.charAt(maxLength-1)=='r')
        {
         inputText=inputText.substring(0,maxLength-1);
         target.className='';
        };
        sourceElem.value=inputText;
       };
      }
      else
       target.className='';
      target.childNodes[0].nodeValue=inputText.length;
     };
    

    with <span id="x_count">0</span>/500 character limit in the body and an onclick="javascript:charCount(this);" attribute for the <textarea>

  • yUPdQiqWYG

    Hi! Very nice site! Thanks you very much! TghvyXzJmSBf

  • Anonymous

    tret
    ret
    rrt

  • Stephen

    Also note that if you have a “white-space: nowrap;” style on a textarea in IE then it will treat a n assigned from JavaScript as a space rather than a line break.

    Took me ages to figure out this one…

  • http://caindia.in/ milanmk

    I was working on the live preview feature on my blog Efficient Tips and came across the same problem with Firefox which treats line endings and line breaks as ‘n’.

    I am now using your second solution that first changes everything to ‘n’ and then replaces the values respectively, as in my case a new line is replaced by <p> and a line ending by <br>.

    Thanks for saving my time.

  • Greenbar

    How did you get the “greenbar paper” effect found under the “November 2nd, 2006 at 11:13 pm” post?