82

I have a string that has new lines in. I am wanting to convert these to HTML <br>s, but I'm having a hard time detecting them.

Imagine a JavaScript string set like this:

var foo = "Bob
is
cool";

They are the kind of new lines that I need to detect. They aren't using the \n special character - they are just plain format.

8 Answers8

91

The reason it is not working is because javascript strings must be terminated before the next newline character (not a \n obviously). The reason \n exists is to allow developers an easy way to put the newline character (ASCII: 10) into their strings.

When you have a string which looks like this:

//Note lack of terminating double quote
var foo = "Bob 

Your code will have a syntax error at that point and cease to run.

If you wish to have a string which spans multiple lines, you may insert a backslash character '\' just before you terminate the line, like so:

//Perfectly valid code
var foo = "Bob \
is \
cool.";

However that string will not contain \n characters in the positions where the string was broken into separate lines. The only way to insert a newline into a string is to insert a character with a value of 10, the easiest way of which is the \n escape character.

var foo = "Bob\nis\ncool.";
Randy the Dev
  • 25,810
  • 6
  • 43
  • 54
87

UPDATE: I just came across a wonderful syntax design in JavaScript-ES6 called Template literals. What you want to do can be literally be done using ` (backtick or grave accent character).

var foo = `Bob
is
cool`;

In which case, foo === "Bob\nis\ncool" is true.

Why the designers decided that ` ... ` can be left unterminated, but the " ... " and ' ... ' are illegal to have newline characters in them is beyond me.

Just be sure that the targeting browser supports ES6-specified Javascript implementation.

 


P.S. This syntax also supports a pretty cool feature that is present in PHP, .NET, and some other scripting languages; namely "Tagged template literals" with which you can build a parameterized string like this:

var a = 'Hello', b = 'World';
console.log(`The computer says ${ a.toUpperCase() }, ${b}!`);
// results in "The computer says HELLO, World!"
David Refoua
  • 3,476
  • 3
  • 31
  • 55
  • I am trying to use `` in Google Apps script IDE and it says "Illegal character.". How to handle? – kiki Mar 28 '19 at 21:14
  • @kiki It seems that Google Apps _doesn't_ support ES6 syntax (the version of javascript that allows this), – David Refoua Mar 28 '19 at 22:32
  • 1
    @kiki so I suggest learning and using Babel in order to "transpile" ES6 to older versions of _compatible_ javascript for Google Apps scripts. You can also [ask a new](https://stackoverflow.com/questions/ask) question titled "How to use ES6 in Google Apps script IDE", maybe someone has a solution for it. – David Refoua Mar 28 '19 at 22:33
  • 3
    Can I give you 10 upvotes for the backtick answer? It really works like magic! :) – Mike B Oct 17 '19 at 10:29
  • 1
    "Why the designers decided that ` ... ` can be left unterminated, but the " ... " and ' ... ' are illegal to have newline characters in them is beyond me." - The developers of Javascript in 1995 were not the same as the ones in 2015. And changing old-style strings would break old code. Pretty clear reasoning. – Jimmie Tyrrell Apr 30 '21 at 20:02
  • @JimmieTyrrell In hindsight, you're clearly correct. I guess I'm more infuriated by the fact that they decided against changing the older syntax to avoid breaking old code as you put it, despite that " ... ... " and ' ... ... ' were still invalid syntax, so I wouldn't see the point of not changing them to allow the same newline syntax. – David Refoua Apr 30 '21 at 20:49
  • 2
    best answer bro – myworldbox May 03 '21 at 19:02
9

Check for \n or \r or \r\n.

There are several representations of newlines, see http://en.wikipedia.org/wiki/Newline#Representations

cfedermann
  • 3,286
  • 19
  • 24
  • 2
    I'm doing that. I've checked for all three: `console.log(story.message.split(/\n/g)); console.log(story.message.split(/\r/g)); console.log(story.message.split(/\r\n/g));` They all return the same. No split. –  Apr 14 '12 at 14:45
4

I think they using \n anyway even couse it not visible, or maybe they using \r. So just replace \n or \r with <br/>

Simon Edström
  • 6,461
  • 7
  • 32
  • 52
3

I don't think you understand how \n works. The resulting string still just contains a byte with value 10. This is represented in javascript source code with \n.

The code snippet you posted doesn't actually work, but if it did, the newline would be equivalent to \n, unless it's a windows-style newline, in which case it would be \r\n. (but even that the replace would still work).

Evert
  • 93,428
  • 18
  • 118
  • 189
  • Thanks. In that case, why won't this work? `console.log(story.message.split(/\n/g)); console.log(story.message.split(/\r/g)); console.log(story.message.split(/\r\n/g));` They all return the same. No split –  Apr 14 '12 at 14:49
3

you can use the following function:

  function nl2br (str, is_xhtml) {
     var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
     return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
  } 

like so:

var mystr="line\nanother line\nanother line";
mystr=nl2br(mystr);
alert(mystr);

this should alert line<br>another line<br>another line

the source of the function is from here: http://phpjs.org/functions/nl2br:480

this imitates the nl2br function in php...

Yaron U.
  • 7,681
  • 3
  • 31
  • 45
3

This is a small adition to @Andrew Dunn's post above

Combining the 2 is possible to generate readable JS and matching output

 var foo = "Bob\n\
    is\n\
    cool.\n\";
J.T. Houtenbos
  • 956
  • 7
  • 17
0

The query string that I used to to escape the new line character in JS : LOAD DATA LOCAL INFILE 'Data.csv' INTO TABLE DEMO FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n' IGNORE 1 ROWS;

This involves new ES6 syntax - Template Literals `` and I tried changing '\n' to '\r\n' and worked perfectly in my case.

PS: This example is my query to upload CSV data into mysql DB.

Dikshit Kathuria
  • 1,182
  • 12
  • 15