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

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

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

必须有一种非常简单的方法来执行此操作...

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

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

您可以简单地执行以下操作：

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

将其放在您的代码中（最好放在通用的js函数库中）：

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

用法：

var myString = "test\ntest2";

myString.nl2br();

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

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

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

为什么要使用两个规则：pre-line仅影响换行符（感谢线索，@ KevinPauli）。IE6-7和其他旧的浏览器回落到更极端的状态pre，其中还包括nowrap并呈现多个空格。有关这些设置和其他设置（pre-wrap）的详细信息，请参见mozilla和css-tricks（感谢@Sablefoste）。

虽然我通常不赞成SO偏向于猜测问题而不是回答问题，但在这种情况下，用<br>标记替换换行符可能会增加用户未经洗刷的输入攻击的脆弱性。每当您发现自己要更改字面意义所暗示的.text()呼叫时，就会越过一条红线.html()。（感谢@AlexS强调了这一点。）即使您当时排除了安全风险，将来的更改也可能会无意间引入它。相反，此CSS允许您使用safer获得硬换行而无需标记.text()。

解

使用此代码

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

此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);
}

演示-JSFiddle

JavaScript nl2br和br2nl函数

我为此编写了一个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);
};

改善@Luca Filosofi的公认答案，

如果需要，将此正则表达式的/([^>[\s]?\r\n]?)begining 子句更改为还将吸收换行符在标签和一些空格之后而不是仅在标签后紧跟换行符的情况

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

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

该属性于2016年成为标准配置，并得到了现代浏览器的大力支持。发布此答案时，我可以使用：97％的全球覆盖率。