Question

如何使用Javascript从值读取换行符并用br标记替换所有换行符？

示例：

从PHP传递的变量如下：

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

我希望我的结果在Javascript转换后看起来像这样：

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."

Answer 1

这会将所有返回值转换为HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

万一你想知道什么？：意味着。它被称为非捕获组。这意味着括号内的正则表达式组不会保存在内存中以便稍后引用。您可以查看这些主题以获取更多信息：
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

Answer 2

如果您的问题只是显示换行符，则可以使用CSS执行此操作。

HTML

<div class="white-space-pre">Some test
with linebreaks</div>

CSS

.white-space-pre {
    white-space: pre-wrap;
}

的jsfiddle https://jsfiddle.net/yk1angkz/125/

注意：注意代码格式和缩进，因为white-space: pre-wrap会显示所有空格（除了文字后面的最后一个换行符，请参见小提琴）

Answer 3

没有正则表达式：

str = str.split("\n").join("<br />");

Answer 4

这适用于来自textarea的输入

str.replace(new RegExp('\r?\n','g'), '<br />');

Answer 5

如果接受的答案不适合您，那么您可以尝试。

str.replace(new RegExp('\n','g'), '<br />')

它对我有用。

Answer 6

无论系统如何：

my_multiline_text.replace(/$/mg,'<br>');

Answer 7

对文本的其余部分进行编码以防止可能的脚本注入攻击

也很重要

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}

Answer 8

当值来自TextBox时，这对我有用：

string.replace(/\n|\r\n|\r/g, '<br/>');

Answer 9

对于那些只想允许最大值的人连续2  ，您可以使用：

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

第一行：搜索\n或\r\n，其中至少有两个是连续的，例如\n\n\n\n。然后将其替换为2 br

第二行：搜索所有单\r\n或\n并将其替换为 

Answer 10

支持最常见的 EOL styles \r、\n、\r\n 和使用 HTML5   的最短代码：

s.replace(/\r?\n|\r/g, '<br>')

Answer 11

如果从PHP发送变量，您可以在发送之前获取它：

$string=nl2br($string);

Answer 12

它将所有新行替换为break

str = str.replace(/\n/g, ' ')

如果要用单个中断线替换所有新行

str = str.replace(/\n*\n/g, ' ')

了解有关正则表达式的更多信息：https://dl.icewarp.com/online_help/203030104.htm 这将对您有帮助。

Answer 13

没有回答具体问题，但是我相信这会帮助某人 ...

如果您有PHP的输出要使用JavaScript呈现在网页上（可能是Ajax请求的结果），并且只想保留空格和换行符，请考虑将文本放在{ {1}}块：

[root@container1 containers]# docker rmi -f node:latest
Untagged: node:latest
Untagged: node@sha256:908e8182394cb5672465780ed45512d9b78dccd10d674e84158ea65b40bba755
Deleted: sha256:451b716593e5f4b35826c8f869950135b925e74d0ed0a40b7c794b8a54ce9b39
Deleted: sha256:a03d77a43b5351b97ef19f81c840533ff6422114700b1681ee7c151a832fb87c
Deleted: sha256:e6a6066bc15756135253b5fe918000872498a3a3ac32f0bf2bce09536268778c
Deleted: sha256:fbe47ce144caf697d31353941e02e3fb3595c8ecb90cc3d9267a491abd7aa6a7
Deleted: sha256:8d8dabce32d508dfcd126ab43cde7b690764c4bd06800e7cac816d367473ad3e
Deleted: sha256:addff6454b75bcccc23ba0cdbf9ff5d83f6df71523cd3428261d1785c3e3c592
Deleted: sha256:dae4f674403b331cb8c19b2c238ffa7d5a7249a1b4fafc4725054201dce3341a
Deleted: sha256:a9a9c8853295275070975beba78ec0f573172e6e41b30232a00d8af0d49b8ef3
Deleted: sha256:ddf0293e8e23246803d265b158ffbb9453d925fe392b43515984815853e9121b
Deleted: sha256:f94641f1fe1f5c42c325652bf55f0513c881c86b620b912b15460e0bca07cc12


[root@container1 containers]# docker pull node:latest
latest: Pulling from library/node
c5e155d5a1d1: Pull complete
221d80d00ae9: Pull complete
4250b3117dca: Pull complete
3b7ca19181b2: Pull complete
425d7b2a5bcc: Pull complete
69df12c70287: Pull complete
2c4b8b667e51: Pull complete
6a284be89e14: Pull complete
9b005e913bed: Pull complete
Digest: sha256:908e8182394cb5672465780ed45512d9b78dccd10d674e84158ea65b40bba755
Status: Downloaded newer image for node:latest

Answer 14

尝试

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");

<div id="msg"></div>

如何使用<br/>标签替换字符串中的所有换行符？

14 个答案: