jQuery将换行符转换为br（nl2br等效）

我让jQuery带一些textarea内容并将其插入到li中。jQuery将换行符转换为br（nl2br等效）

我希望它在视觉上保留换行符。

必须有一个非常简单的方法来做到这一点...

2010-05-27 gbhall

XSS注意：如果你这样做，这听起来像你直接混合用户输入和
's，这意味着你要么显示换行符或
，因此*可能*开放给XSS攻击，这如果您的输入来自网站上的任何其他用户。 – user420667 2017-01-31 03:08:48

145

演示：http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) { 
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';  
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2'); 
}

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

来源

2010-05-27 07:56:54

谢谢你完美的作品。奇怪这不是jQuery的官方功能。 – gbhall 2010-05-27 08:03:30

原因jQuery并不是要替换原生javascript函数，而是替换，它专注于CSS选择器链接和轻松访问！也许在未来的版本;-) – 2010-05-27 08:08:56

太棒了。帮助我解决了IE7不支持空格的问题：pre-wrap – 2010-11-10 22:45:20

，你可以简单地做：

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

来源

2010-05-27 07:54:17 mck89

干杯，这种工作，除了它将多行换行视为单行换行。 – gbhall 2010-05-27 08:02:50

我已更新它，现在它使用正则表达式，因此如果您想将多个换行符视为单个br，请使用以下命令更改正则表达式：/ \ n +/g – mck89 2010-05-27 08:05:46

谢谢。希望有人会发现你的答案有用，但下面的函数也适用。我觉得有点不好，你正在做更多的努力，但一个功能是更可取的。 – gbhall 2010-05-27 08:09:29

（最好是在一般的JS函数库）将这个在你的代码：

String.prototype.nl2br = function() 
{ 
    return this.replace(/\n/g, "<br />"); 
}

用法：

var myString = "test\ntest2"; 

myString.nl2br();

创建一个字符串原型功能允许您在任何字符串上使用它。

来源

2012-03-27 23:22:07 jnl

我想知道这是否有效？ – jackkorbin 2014-08-22 11:38:27

是的，这对我很好。很简单的解决方案 – 2014-10-31 15:31:31

这太神奇了！ – 2015-10-27 00:11:48

解决方案

使用此代码

jQuery.nl2br = function(varTest){ 
    return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>"); 
};

来源

2014-11-26 07:43:43

在改变渲染而不是改变内容的精神，以下CSS 使得每个新行更像一个<br>：

white-space: pre; 
white-space: pre-line;

为什么两条规则：pre-line只影响换行（感谢线索@KevinPauli）。 IE6-7和其他旧浏览器回落到更极端的pre其中还包括nowrap并呈现多个空间。这些和其他设置（pre-wrap）在mozilla和css-tricks（谢谢@Sablefoste）的详细信息。

虽然我通常不喜欢S.O.偏好second-guessing the question而不是回答它，在这种情况下用<br>标记替换换行符可能会增加易受攻击注入攻击与未清洗的用户输入。当您发现自己将.text()呼叫更改为.html()时，您正在穿越明亮的红线，这是字面问题意味着必须完成的。（感谢@AlexS突出显示了这一点。）即使您当时排除了安全风险，未来的更改也可能无意中引入了它。相反，这个CSS允许你在没有标记的情况下使用更安全的.text()来获得强大的换行符。

来源

2016-09-09 15:43:31

根据具体情况，这是最简单的解决方案，并且最能真正回答问题。你也可以考虑任何其他的'white-space：'选项，比如'pre-wrap'。见https://css-tricks.com/almanac/properties/w/whitespace/ – Sablefoste 2016-10-28 14:16:16

这真的是最好的答案 - 字符串替换解决方案意味着需要使用'.html（）'来设置内容，然后依次将允许用户插入任意的HTML，除非事先过滤出来。 – 2017-07-01 20:19:26

关于''的好处。html（）'危险@AlexS，试图合并。 – 2017-07-02 17:15:23

改善@Luca Filosofi的接受的答案，

如果需要的话，改变这个正则表达式的开始子句是/([^>[\s]?\r\n]?)还将则会忽略，而不只是一个标签，其中新行来标记和一些空白后的情况下，紧接着一个换行符

来源

2017-05-19 19:41:25 phlare

另一种插入从DOM中的文本区域保持换行符文本使用Node.innerText属性，它代表一个节点及其后代的呈现文本内容。

作为一种吸气剂，它近似于用户在用光标高亮显示元素内容然后复制到剪贴板时会得到的文本。

该属性在2016年成为标准，并得到现代浏览器的大力支持。 Can I Use：97％全球覆盖当我发布这个答案。

来源

2017-08-31 08:34:56 Volo

jQuery将换行符转换为br（nl2br等效）

回答

相关问题