Javascript 如何用<;替换字符串中的所有换行符;br/>;元素?

Javascript 如何用<;替换字符串中的所有换行符;br/>;元素?,javascript,Javascript,如何用JavaScript从值中读取换行符,并用元素替换所有换行符 例如: 从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.&

如何用JavaScript从值中读取换行符,并用

元素替换所有换行符

例如:

从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."
“这是人

人如狗。
人喜欢喝酒。

人是国王。”
这将把所有返回内容转换为HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
str=str.replace(/(?:\r\n |\r |\n)/g,“
”;
万一你想知道?:是什么意思。 它被称为非捕获组。这意味着括号内的一组正则表达式将不会保存在内存中以供以后引用。 您可以查看这些线程以了解更多信息:
不带正则表达式:

str = str.split("\n").join("<br />");
str=str.split(“\n”).join(
);
为防止可能的脚本注入攻击,对其余文本进行编码也很重要

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'));
        }
    }
}
函数insertTextWithLineBreaks(文本,targetElement){
var textWithNormalizedLineBreaks=text.replace('\r\n','\n');
var textParts=textWithNormalizedLineBreaks.split('\n');
对于(变量i=0;i
如果接受的答案不适合您,您可以尝试

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

它对我很有用。

这适用于来自文本区域的输入

str.replace(new RegExp('\r?\n','g'), '<br />');
str.replace(新的RegExp('\r?\n','g'),'
');
无论系统如何:

my_multiline_text.replace(/$/mg,'<br>');
my_multiline_text.replace(/$/mg,
);
当值来自文本框时,这对我有效:

string.replace(/\n|\r\n|\r/g, '<br/>');
string.replace(/\n |\r\n |\r/g,
);
如果您关心的只是显示换行符,您可以使用CSS来实现这一点

一些测试
断线
Jsfiddle:


注意:注意代码格式和缩进,因为
空白:行前
将显示所有换行符(除了文本后的最后一个换行符,请参见fiddle)。

对于那些只想允许最多两行

的人,您可以使用以下方法:

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

'); text=text.replace(/(\r?\n)/g,
);
第一行:搜索
\n
\r\n
,其中至少有两个在一行中,例如
\n\n\n
。然后将其替换为2
br


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

如果您从PHP发送变量,则可以在发送之前通过以下方式获取:

$string=nl2br($string);
它将用break替换所有新线

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

如果要将所有新行替换为单换行

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

阅读有关Regex的更多信息: 这对你每次都有帮助


没有回答具体的问题,但我相信这将有助于某人

如果您有PHP的输出,您希望使用JavaScript(可能是Ajax请求的结果)在Web页面上呈现,并且您只想保留空白和断线,请考虑只在<代码> <代码>块中包含文本:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';
s.replace(/\r?\n|\r/g, '<br>')
var text_with_line_breaks=从_php()中检索一些_text_;
var元素=document.querySelectorAll(“#输出”);
element.innerHTML=''+文本,带“+”换行符;
试试看

让我们=`这是人。
人喜欢狗。
男人喜欢喝酒。
人是国王;
msg.innerHTML=s.replace(/\n/g,“
”)
最短代码支持最常见的
\r
\n
\r\n
和使用HTML5

s.replace(/\r?\n |\r/g,

您原来的问题有什么问题吗?在将其发送到JavaScript之前,您还可以使用PHP执行nl2br($string)。我将投票结束前面的问题,因为这有一个更好的示例。他应该编辑最初的问题,然后我来到这里是出于对.text()的错误理解。看看你是不是这样做的,如果你这样做“\\n”你就可以避免只在“n”上拆分的问题。@CrowderSoup嗯?我刚刚尝试了它,但新的一行中的
\\n
不匹配,因为它正在查找
反斜杠
+
n
。我制作了一个测试用例。正则表达式稍微快一点,但是你自己看看,我发现这个答案不起作用,除非斜杠被转义。例如:str=str.split(“\n”).join(
)@ACOMIT001我想这取决于字符串是否有新行或黑色斜杠,n?
new RegExp('\n',g')
/\n/g
相同(除了一些关于使用原语文本与它们的构造函数的细节)。不管是什么原因,这对我来说是有效的,但接受的答案是否定的,这里也是一样的。。。但我的错误是试图将
/\n/g
指定为字符串!只需补充说明:
str.replace(“\n”,“
”)
(第一个参数是常规字符串)将只替换第一次出现的字符串。另一个版本(替换多个换行符):str.replace(/(\n)+/g,
)@谢尔盖。谢谢你的额外评论。刚刚帮我节省了很多时间@SergeS.,
String#replace
将其第一个参数从
String
强制为转义的
RegExp
实例,不带任何标志<代码>str.replace('\n','
')
相当于
str.replace(新的RegExp('\n'),'
')
这是一个与
str.split(“\n”).join(“
”)比较的测试用例。join(
RegEx似乎有点快。这是我的最佳答案,因为您没有忘记在某些系统上使用的\r。这是这个问题的最佳答案。但我只会选择不选<