jQuery 将换行符转换为 br (nl2br 等效)答案

【问题标题】：jQuery convert line breaks to br (nl2br equivalent)jQuery 将换行符转换为 br (nl2br 等效)
【发布时间】：2011-02-24 13:10:27
【问题描述】：

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

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

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

【问题讨论】：

XSS 注意：如果你这样做，听起来你是在直接混合用户输入和
的，这意味着你要么显示换行符，要么显示
，因此可能容易受到 XSS 攻击，也就是说，如果您的输入来自网站上的任何其他用户。

标签： javascript jquery line-breaks

【解决方案1】：

演示： 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

【讨论】：

谢谢你这完美的作品。奇怪的是，这不是 jQuery 的官方功能。
因为 jQuery 并不是要取代像 replace 这样的原生 javascript 函数，它专注于 CSS 选择器链接和易于访问！也许在未来的版本中;-)
太棒了。帮助我解决了 IE7 不支持空白的问题：pre-wrap
该正则表达式是否意味着如果一行以“>”结尾，它不会添加 BR？我知道在我的 HTML 中我使用 >但是用户生成的内容并不能很好地处理...
@DaveStein 不，我用 '>' 和 '>' 都试过了并且两次都添加了换行符。我觉得这个功能代码基本完美了:)

【解决方案2】：

你可以这样做：

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

【讨论】：

干杯，这种工作，除了它将多个换行符视为一个换行符。
我已经更新了它，现在它使用了一个正则表达式，所以如果你想将多个换行符视为一个 br 更改正则表达式：/\n+/g
谢谢。希望有人会发现您的答案很有用，但下面的功能也可以。我觉得你付出了更多的努力，但功能更可取。
如果您收到错误“x.replace 不是函数”，请使用 x.toString().replace

【解决方案3】：

本着改变渲染而不是改变内容的精神，以下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() 来获得硬换行符而无需标记。

【讨论】：

视情况而定，这是最简单的解决方案，并且确实最好地回答了问题。您还可以考虑任何其他white-space: 选项，例如pre-wrap。见css-tricks.com/almanac/properties/w/whitespace
这确实是最好的答案 - 字符串替换解决方案意味着需要使用 .html() 来设置内容，这反过来又允许用户插入任意 HTML，除非您提前过滤掉它.
关于.html()danger @AlexS 的好点，试图合并。

【解决方案4】：

把它放在你的代码中（最好放在通用的 js 函数库中）：

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

用法：

var myString = "test\ntest2";

myString.nl2br();

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

【讨论】：

【解决方案5】：

解决方案

使用此代码

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

【讨论】：

【解决方案6】：

此 JavaScript 函数考虑是否使用插入或替换来处理交换。

（插入或替换 HTML 换行符）

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

Demo - JSFiddle

JavaScript nl2br & br2nl functions

【讨论】：

【解决方案7】：

我为此写了一个小的 jQuery 扩展：

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

【讨论】：

【解决方案8】：

改进@Luca Filosofi 接受的答案，

如果需要，将此正则表达式的开头子句更改为 /([^>[\s]?\r\n]?) 也将忽略换行符出现在标记和一些空格之后的情况，而不仅仅是一个紧跟一个换行符的标记

【讨论】：

【解决方案9】：

另一种从 DOM 中的 textarea 插入文本以保持换行符的方法是使用 Node.innerText 属性，该属性表示节点及其后代的渲染文本内容。

作为一个 getter，它近似于用户使用光标突出显示元素的内容然后复制到剪贴板时所获得的文本。

该属性在 2016 年成为标准，并受到现代浏览器的良好支持。 Can I Use：当我发布这个答案时，全球覆盖率为 97%。

【讨论】：