Cross-Browser - Newline characters in textareas

Question

In my web application (JSP, JQuery...) there is a form which, along with other fields, has a textarea where the user can input notes freely. The value is saved to the database as is.

The problem happens when the value has newline characters and is loaded back to the textarea; it sometimes "breaks" the Jquery code. Explaining further:

The value is loaded to the textarea using Jquery:

 $('#p_notas').text("value_from_db");

When the user hits Enter to insert a new paragraph, the resulting value will include a newline character (or more than one char). This char is the problem as it varies from browser to browser and I haven't found out which one is causing the problem.

The error I get is a console error: SyntaxError: unterminated string literal. The page doesn't load correctly.

I'm not able to reproduce the problem. I tried with Chrome, Firefox and IE Edge (with several combinations of user agent and document mode). We advise our users to use IE8+, Firefox or Chrome but we can't control it.

What I wanted to know is which character is causing the problem and how can I solve it.

Thanks

EDIT: Summing up - What are the differences in newline characters for the different browsers? Can I do anything to make them uniform?

EDIT 2: Looking at the page in the debugger, what I get is: Case 1 (No problem)

$('#p_notas').text("This is the text I inserted \r\n More text");

Case 2 (Problem)

    $('#p_notas').text("This is the text I inserted 
More text");

In case 2 I get the Javascript error "SyntaxError: unterminated string literal." because it is interpreted as two lines of code

EDIT 3: @m02ph3u5 I tried using '\r' '\n' '\r\n' '\n\r' and I couldn't reproduce the problem.

EDIT 4: I'm going to try and replace all line breaks with '\n\r'

EDIT 5: In case it is of interest, what I did was treat the value before it was saved

value.replace(/(?:\r\n|\r(?=\n)|\n(?=\r))/g, '\n\r')

Answer 1

The problem isn't the browser but the operating system. Quoting from this post:

So, using \r\n will ensure linebreaks on all major operating systems without issue.

Here's a nice read on the why: why do operating systems implement line breaks differently?

The problem you might be experiencing is saving the value of the textarea and then returning that value including any newlines. What you could do is "normalize" the value before saving, so that you don't have to change the output. In other words: get the value from the textarea, do a find-and-replace and replace every ossible occurrence of a newline (\r, \n) by a value that works on all OS's \r\n. Then, when you get the value from the database later on, it'll always be correct.

Answer 2

I suspect your problem is actually any new line in the entered input is causing an issue. It looks like on the server you are have a templated page something like:

$('#p_notas').text("<%=db.value%>");

So what you end up with client side is:

$('#p_notas').text("some notes that
were entered by the user");

or some other characters that break the JS. Embedded quotes would do it too. You need to escape the user entered values some how. The preferred "modern" way is to format info you are returning as AJAX. If you are embedding the value within a template what I might do is:

<div style="display:none" id="userdata><%=db.value%></div>
<script>$('#p_notas').text($("#userdata").text());</script>

Of course if it were this exactly you could just embed the data in the text area <textarea><%=db.value%></textarea>

Answer 3

When you output data to the response, you always need to encode it using the appropriate encoding for the context it appears in.

You haven't mentioned which server-side technology you're using. In ASP.NET, for example, the HttpUtility class contains various encoding methods for different contexts:

• HtmlEncode for general HTML output;
• HtmlAttributeEncode for HTML attributes;
• JavaScriptStringEncode for javascript strings;
• UrlEncode for values passed in the query-string of a URL;

In some cases, you might need to encode the value more than once. For example, if you're passing a value in a URL via a javascript string, you'd need to UrlEncode the raw value, then JavaScriptStringEncode the result.

Assuming that you're using ASP.NET, and your code currently looks something like this:

$('#p_notas').text("<%# Eval("SomeField") %>");

change it to:

$('#p_notas').text("<%# HttpUtility.JavaScriptStringEncode(Eval("SomeField", "{0}")) %>");