jQuery 将换行符转换为 br(相当于 nl2br)

IT技术 javascript jquery line-breaks
2021-01-28 06:30:26

我让 jQuery 获取一些 textarea 内容并将其插入到 li 中。

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

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

6个回答

演示: 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');
}
@DaveStein 不,我用“>”和“>”都试过了 并且两次都添加了换行符。我觉得这个函数代码基本完美:)
2021-03-17 06:30:26
谢谢你这完美地工作。奇怪的是,这不是 jQuery 的官方功能。
2021-03-30 06:30:26
因为 jQuery 并不是要替换原生 javascript 函数,如替换,它专注于 CSS 选择器链接和易于访问!也许在未来的版本中;-)
2021-04-07 06:30:26
那个正则表达式不是意味着如果一行以“>”结尾,它就不会添加 BR 吗?我知道在我的 HTML 中我使用 > 但是用户生成的内容并不能很好地工作......
2021-04-07 06:30:26
惊人的。帮助我解决了 IE7 不支持空白的问题:预包装
2021-04-12 06:30:26

你可以简单地做:

textAreaContent=textAreaContent.replace(/\n/g,"<br>");
我已经更新了它,现在它使用正则表达式,所以如果你想将多个换行符视为单个 br,请使用以下命令更改正则表达式:/\n+/g
2021-03-21 06:30:26
干杯,这种工作,除了它将多个换行符视为单个换行符。
2021-04-01 06:30:26
谢谢你。希望有人会发现您的答案很有用,但下面的功能也能正常工作。我觉得你做更多的努力有点不好,但一个功能更可取。
2021-04-07 06:30:26
如果您收到错误“x.replace 不是函数”,则使用 x.toString().replace
2021-04-09 06:30:26

本着更改渲染而不是更改内容的精神,以下 CSS使每个换行符的行为类似于<br>

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

为什么有两条规则:pre-line只影响换行符(感谢提供线索,@KevinPauli)。IE6-7 和其他旧浏览器退回到更极端的情况pre,它也包含nowrap并呈现多个空间。有关mozillacss-tricks 中这些和其他设置 ( pre-wrap) 的详细信息(感谢 @Sablefoste)。

虽然我通常不喜欢对问题进行二次猜测而不是回答问题,但在这种情况下,用<br>标记替换换行符可能会增加对未经清洗的用户输入进行注入攻击的脆弱性每当您发现自己更改了字面问题暗示必须完成的.text()呼叫时,您就会越过一条明亮的红线.html()(感谢@AlexS 强调这一点。)即使您当时排除了安全风险,未来的更改也可能会在不知不觉中引入它。相反,此 CSS 允许您使用更安全的.text().

这确实是最好的答案 - 字符串替换解决方案意味着需要使用.html()来设置内容,这反过来又会允许用户插入任意 HTML,除非您提前将其过滤掉。
2021-03-17 06:30:26
关于.html()危险的好点@AlexS,试图合并。
2021-03-26 06:30:26
根据具体情况,这是最简单的解决方案,并且真正最好地回答了问题。您还可以考虑任何其他white-space:选项,例如pre-wrap. 请参阅css-tricks.com/almanac/properties/w/whitespace
2021-04-03 06:30:26

把它放在你的代码中(最好是在一个通用的 js 函数库中):

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

用法:

var myString = "test\ntest2";

myString.nl2br();

创建字符串原型函数允许您在任何字符串上使用它。

解决方案

使用此代码

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