如何在JavaScript中使用< br />替换\n？

Question

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

如何用<br />标签替换\n？

解决方案

很多人都试过了，有些人用JavaScript正则表达式并带有/g（全局修饰符）做对了。 最后我发现\n被插入了两次，我不知道为什么，我的唯一猜测是jQuery在keypress事件上创建了双重\n，我进行了调试。

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

- eugeneK

---

通常情况下，在客户端进行替换不是一个好主意。 - Teneff

@Teneff，似乎没有将\n发送到服务器，它被省略了。我可以在服务器上更改它，但我除了文本之外什么也没收到。 - eugeneK

如果您添加了一个可以支持/n的新应用程序来检索数据，那么您还应该以原始格式进行存储，这样您就可以展示它了。您尝试过对其进行编码吗？ - jimplode

#input 是一个 <input type="text"/> 吗？如果是，你将不会得到任何 \n。如果它是一个文本区域，我建议你在用户点击提交按钮时转换数据，而不是在输入时转换。但更好的方法是在服务器端进行转换。 - BrunoLM

@BrunoLM，#input 是文本区域，我在提交时将 \n 替换为 :br:，并在从服务器获取数据时将 :br: 转换为 br html 标签。为什么我不在服务器上这样做呢？因为除了 br 标签之外，我还有图片，而图像标签是通过服务发送到 jQuery 包装器的较长标签之一，所以我用冒号标记需要的标签，就像论坛使用 [tagname] 一样。 - eugeneK

Answer 1

替换为全局作用域

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

或者

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

- BrunoLM

---

它可以全局替换，但在按键时会替换两次br标签。 - eugeneK

Answer 2

可以这样做：

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

编辑：抱歉...在JavaScript中的正则表达式不应该加引号。

工作示例

- Teneff

---

由于他想要替换\n而不是/\n/，所以这个代码无法工作。如果它本来就是一个正则表达式，它只会替换第一次出现的内容。 - BrunoLM

@Qtax，它只替换第一个出现的 \n 并省略其他的。 - eugeneK

如果你真的想使用正则表达式，可以使用 /\n/g，但是最好还是直接使用字符串替换，比如 "\n"。 - Qtax

Answer 3

正如评论和其他答案中所说，最好在服务器端执行此操作。

但是，如果您想知道如何在客户端执行此操作，则可以使用以下简单方法：

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

其中textareaContent是带有文本区数据的变量。

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

- rzetterberg

---

它只替换第一个出现的 \n。 - eugeneK

Answer 4

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

- Allman

Answer 5

您可以使用一个简单的JavaScript字符串函数。

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

- Wicked Coder

Answer 6

您可以使用JavaScript内置的replace函数，结合一些正则表达式的帮助，例如：

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

这段代码会将所有回车替换为 <br>

- Senad Meškin

---

这是整个页面中唯一对我有效的WordPress编辑器插件。如果您正在使用WordPress编辑器插件，并且由于某种原因需要显示编辑器内容的预览，则这是此处唯一有效的选项。 - David Lawrence

你真的尝试了这个问题中的每一个解决方案吗？如果是的话，那么你真的很有毅力。 :) - Senad Meškin

Answer 7

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

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

- Richard Friend

---

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

Answer 8

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

- Qtax

Answer 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

- Tomas Reimers

---

$1和$2是什么意思？([^>\r\n]?)和(\r\n|\n\r|\r|\n) - eugeneK

说实话，我对正则表达式的掌握不如应该。但是我所知道的一点内容可以总结在这两个链接中：美元符号 - http://mootools-users.660466.n2.nabble.com/Moo-preg-replace-in-javascript-td4718179.html；所有的r和n - http://lawrence.ecorp.net/inet/samples/regexp-format.php（向下滚动到有关使用HTML br替换回车符的部分）。代码在这里展示并且可以正常工作 - http://jsfiddle.net/Dar96/9/。 - Tomas Reimers

Answer 10

以下代码将会把所有的 \n 替换为 <br /> ：

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

- parliament

---

一次迭代就足够了，因为它会替换所有出现的情况。 - Simon Fakir