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.
Frequently Asked Questions (FAQs) about Line Endings in JavaScript
What is the significance of line endings in JavaScript?
Line endings in JavaScript are crucial as they signify the end of a statement. In JavaScript, each statement is separated by a semicolon (;). However, JavaScript interpreters are smart enough to insert semicolons automatically at the end of lines if they are missing. This feature is known as Automatic Semicolon Insertion (ASI). Despite this, it’s considered good practice to include semicolons manually to avoid any potential errors or unexpected results.
How can I add a new line in JavaScript?
In JavaScript, you can add a new line using escape sequences. The escape sequence for a new line is ‘\n’. For example, if you want to add a new line between two sentences, you can do it like this: “Hello\nWorld”. When this string is printed, “Hello” and “World” will be on separate lines.
What is the difference between ‘\n’ and ‘\r\n’ in JavaScript?
In JavaScript, ‘\n’ and ‘\r\n’ are both used to create new lines. However, they are used differently depending on the operating system. ‘\n’ is used as a newline character in Unix-based systems (like Linux and Mac), while ‘\r\n’ is used in Windows. The ‘\r’ character represents a carriage return, which moves the cursor to the beginning of the line without advancing to the next line.
How can I add multiple line breaks in JavaScript?
To add multiple line breaks in JavaScript, you can use the ‘\n’ escape sequence multiple times. For example, “Hello\n\nWorld” will add two line breaks between “Hello” and “World”.
Can I use HTML tags for line breaks in JavaScript?
Yes, you can use HTML tags for line breaks in JavaScript when you are working with HTML content. The ‘
‘ tag can be used to add a line break. For example, “Hello
World” will add a line break between “Hello” and “World” when displayed in an HTML document.
What is the role of line endings in JavaScript comments?
In JavaScript, line endings play a significant role in comments. Single-line comments in JavaScript start with ‘//’ and end at the line break. Everything after ‘//’ on the same line is considered a comment and ignored by the JavaScript interpreter.
How can I handle line endings in JavaScript strings?
In JavaScript strings, line endings can be handled using the ‘\n’ escape sequence. This sequence inserts a newline character into the string, effectively creating a line break.
How does Automatic Semicolon Insertion (ASI) handle line endings?
Automatic Semicolon Insertion (ASI) in JavaScript is a mechanism that automatically inserts semicolons after most line terminators. This means that even if you forget to put a semicolon at the end of a statement, JavaScript will still interpret it correctly.
Can I use line endings to format my JavaScript code?
Yes, line endings can be used to format JavaScript code. Proper use of line endings can make your code more readable and easier to maintain. It’s common practice to start a new line for each statement or after a block of code (like a function or loop).
How do line endings affect the execution of JavaScript code?
Line endings in JavaScript primarily affect readability and organization of the code. However, they can also impact the execution of the code in terms of Automatic Semicolon Insertion (ASI). If a line ending is placed incorrectly, it could lead to unexpected results due to the automatic insertion of semicolons. Therefore, it’s important to understand and use line endings correctly.
Simon Willison
