如何在 JavaScript 中用 替换 \n？答案

【问题标题】：How to replace \n with in JavaScript?如何在 JavaScript 中用 替换 \n？
【发布时间】：2011-06-13 14:38:22
【问题描述】：

我有一个文本区域，当用户按下回车键时，我在其中插入 \n。此文本区域中的代码通过jQuery.ajax() 发送到 WCF 服务。我无法将\n 保存在数据库中，因为它不会显示在使用该服务的其他应用程序中。

如何将\n 替换为  标签？

解决方案

你们中的许多人都尝试过，有些人使用带有 /g（全局修饰符）的 Javascript 正则表达式得到了正确的结果。最后我 \n 插入了两次，我不知道为什么，我唯一的猜测是 jQuery on keypress 事件创建了我调试的双 \n。

$('#input').keypress(function (event) {
    if (event.which == '13') {
        inputText = $('#input').val() + '\n';
        $('#input').val(inputText);
    }
});

【问题讨论】：

通常在客户端替换它不是一个好主意
@Teneff, \n 没有发送到服务器，似乎省略了。我可以在服务器上更改它，但除了文本之外我什么也没有收到。
您还应该以输入的原始格式存储它，如果您添加了一个新应用程序来检索可以支持 /n 的数据，那么您肯定应该显示它吗？你试过编码吗？
是#input 还是<input type="text"/>？因为如果是，您将不会得到任何\n。如果它是文本区域，我建议您在用户单击按钮提交时转换数据，而不是在输入时转换数据。但比我只在服务器端转换更好。
@BrunoLM，#input 是 textarea，当我从服务器取回数据时，我确实将 \n 替换为 :br: 并在提交时将 :br: 替换为 br html 标记。为什么我不在服务器上执行此操作，因为除了 br 标签之外，我还有图像和图像标签很长，可以通过服务发送到 jQuery 包装器，所以我用冒号标记我需要的标签，就像论坛用 [tagname]

标签： javascript jquery regex

【解决方案1】：

替换为全局范围

$('#input').val().replace(/\n/g, "<br />")

或

$('#input').val().replace("\n", "<br />", "g")

【讨论】：

它在全局范围内替换得很好，但它在按键上替换了两次 br 标签

【解决方案2】：

可以这样做：

$('textarea').val().replace(/\n/g, "<br />");

编辑：抱歉……javascript中的正则表达式不应该被引用

working example

【讨论】：

不起作用，因为他想替换 \n 而不是 /\n/。如果它打算成为一个正则表达式，它只会替换第一次出现。
@Qtax，它只替换 \n 的第一次出现并省略其他人
只需使用字符串替换，例如"\n"，如果您真的想使用正则表达式，您可以使用/\n/g。

【解决方案3】：

就像在 cmets 和其他答案中所说的那样，最好在服务器端进行。

但是，如果您想知道如何在客户端执行此操作，这是一个简单的解决方法：

textareaContent.replace(/\\n/g, "<br />");

其中textareaContent 是文本区域中包含数据的变量。

编辑： 更改为全局替换，而不仅仅是第一个匹配项。

【讨论】：

它只替换\n的第一次出现

【解决方案4】：

如果你支持 PHP，你应该看看这个：http://php.net/manual/en/function.nl2br.php

【讨论】：

【解决方案5】：

你可以使用一个简单的javascript字符串函数。

 string.replace("\n", "<br>")

【讨论】：

【解决方案6】：

你可以通过一些正则表达式的帮助来使用javascript内置的替换功能，例如

$('#input').val().replace(/\n\r?/g, '<br />')

此代码将返回所有替换为 的输入

【讨论】：

这是整个页面中唯一对我有用的 wordpress 编辑器。如果您在插件中使用 wordpress 编辑器，并且出于某种原因需要显示编辑器内容的预览，那么这是唯一可以使用的。
你真的尝试过这个问题的每一个解决方案吗，如果你这样做了，那么你真的很坚持。 :)

【解决方案7】：

在您的 WCF 服务中，您不能只使用 String.Replace 吗？

text = text.Replace("\n","<br />");

【讨论】：

不要这样做！您必须使用正则表达式来全局替换所有匹配项。例如，在您的情况下，它只会替换第一次出现

【解决方案8】：

var replaced = $('#input').val().replace("\n", "<br/>");

【讨论】：

【解决方案9】：

在其他答案的基础上，这可能是 php 做得最好的。现在假设您不想使用 ajax（这将毫无意义并导致不必要的服务器负载），您可能应该使用 phpjs.org 的 this function 的 javascript 端口：

function nl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  
    // 
    // version: 1103.1210
    // discuss at: http://phpjs.org/functions/nl2br    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Philip Peterson
    // +   improved by: Onno Marsman
    // +   improved by: Atli Þór
    // +   bugfixed by: Onno Marsman    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Maximusya
    // *     example 1: nl2br('Kevin\nvan\nZonneveld');    // *     returns 1: 'Kevin\nvan\nZonneveld'
    // *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
    // *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
    // *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
    // *     returns 3: '\nOne\nTwo\n\nThree\n'    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

http://phpjs.org/functions/nl2br:480

【讨论】：

$1 和 $2 是什么意思？ ([^>\r\n]?) 和 (\r\n|\n\r|\r|\n)
说实话，我对正则表达式的使用并不如我应该的那样好。但我对此知之甚少总结在这两个链接中：美元符号 - mootools-users.660466.n2.nabble.com/…;所有的 r 和 n - lawrence.ecorp.net/inet/samples/regexp-format.php（向下滚动到关于用 html br 替换回车的部分。代码如下所示 - jsfiddle.net/Dar96/9

【解决方案10】：

以下内容将用  替换所有\n 实例：

while (message.indexOf("\\n") !== -1) {
   message = message.replace("\\n", "<br />");
}

【讨论】：

一次迭代就足够了，因为它会替换所有出现。

【解决方案11】：

我知道这是一个古老的问题/答案，但它是最早出现在谷歌搜索中的问题之一，并且在遥远的将来不再适用于当前的浏览器。

将\n 转换为 （至少对我而言）的正确答案是：

text = text.Replace(/\\n/g,"<br />");

【讨论】：