Question

在我的Web应用程序（JSP，JQuery ...）中，有一个表单，与其他字段一起，有一个texarea，用户可以自由地输入注释。该值按原样保存到数据库中。

当值具有换行符并且被加载回textarea时，会发生问题;它有时＆＃34;休息＆＃34; Jquery代码。进一步解释：

使用Jquery：

将值加载到textarea

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

当用户按Enter键插入新段落时，结果值将包含换行符（或多个字符）。这个问题就是问题，因为它在浏览器之间有所不同，我还没有发现哪一个导致问题。

我得到的错误是控制台错误：SyntaxError：unterminated string literal。该页面无法正确加载。

我无法重现问题。我尝试使用Chrome，Firefox和IE Edge（使用用户代理和文档模式的几种组合）。我们建议用户使用IE8 +，Firefox或Chrome，但我们无法控制它。

我想知道的是哪个角色导致问题，我该如何解决。

由于

编辑：总结 - 不同浏览器的换行符有什么区别？我能做些什么让它们变得均匀吗？

编辑2：查看调试器中的页面，得到的是：案例1（没问题）

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

案例2（问题）

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

在案例2中，我收到Javascript错误＆＃34; SyntaxError：unterminated string literal。＆＃34;因为它被解释为两行代码

编辑3：@ m02ph3u5我尝试使用＆＃39; \ r＆＃39; ＆＃39; \ n＆＃39; ＆＃39; \ r \ n＆＃39; ＆＃39; \ n \ r＆＃39;我无法重现这个问题。

编辑4：我将尝试用＆＃39; \ n \ r＆＃39;

替换所有换行符

编辑5：如果感兴趣，我所做的就是在保存之前对值进行处理

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

Answer 1

问题不在于浏览器，而在于操作系统。引自this post：

因此，使用\ r \ n将确保所有主要操作系统上的换行符没有问题。

这里是nice read on the why：为什么操作系统以不同的方式实现换行？

您可能遇到的问题是保存textarea的值，然后返回该值，包括任何换行符。你能做的是＆＃34;规范化＆＃34;保存前的值，这样您就不必更改输出。换句话说：从textarea获取值，进行查找和替换，并用一个适用于所有操作系统\ r \ n的值替换换行符（\ r，\ n）的每一个可能出现的内容。然后，当您稍后从数据库中获取值时，它始终是正确的。

Answer 2

我怀疑您的问题实际上输入的输入中的任何新行都会导致问题。看起来在服务器上你有一个模板化页面，如：

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

所以你最终得到客户端的是：

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

或其他破坏JS的角色。嵌入式报价也会这样做。您需要在某些方面转义用户输入的值。首选的“现代”方式是格式化您作为AJAX返回的信息。如果要在模板中嵌入值，我可能会做的是：

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

当然，如果确实如此，您可以将数据嵌入文本区域<textarea><%=db.value%></textarea>

Answer 3

当您向答案输出数据时，始终需要使用适当的编码对其进行编码。

您还没有提到您正在使用的服务器端技术。例如，在ASP.NET中，the HttpUtility class包含针对不同上下文的各种编码方法：

HtmlEncode用于一般HTML输出;
HtmlAttributeEncode用于HTML属性;
JavaScriptStringEncode用于javascript字符串;
UrlEncode表示在网址的查询字符串中传递的值;

在某些情况下，您可能需要对该值进行多次编码。例如，如果您通过javascript字符串传递了网址中的值，则需要UrlEncode原始值，然后JavaScriptStringEncode结果。

假设您正在使用ASP.NET，并且您的代码目前看起来像这样：

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

将其更改为：

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

跨浏览器 - textareas中的换行符

3 个答案: