Question

我正在使用jQuery获取一些textarea内容并将其插入到li中。

我希望它能直观地保留换行符。

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

Answer 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

Answer 2

你可以这样做：

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

Answer 3

将它放在你的代码中（最好是在一般的js函数库中）：

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

用法：

var myString = "test\ntest2";

myString.nl2br();

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

Answer 4

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

pre

为什么有两条规则：nowrap只影响换行符（感谢线索@KevinPauli）。 IE6-7和其他旧浏览器回归到更极端的pre-wrap，其中还包括<br>并呈现多个空格。有关mozilla和css-tricks的这些设置和其他设置（.text()）的详细信息（感谢@Sablefoste）。

虽然我一般不喜欢S.O.对second-guessing the question的偏好而不是回答它，在这种情况下，用.html()标记替换换行符可能会增加对未使用的用户输入的注入攻击的漏洞。当您发现自己正在更改.text()对df[df['side'] == 'Sell']['quantity'] = df[df['side'] == 'Sell']['quantity'] * -1的调用时，您会遇到一条明亮的红线，而这些调用必须完成文字问题。（感谢@AlexS突出这一点。）即使您当时排除了安全风险，未来的更改也可能会无意中引入它。相反，这个CSS允许您使用更安全的{{1}}来获得没有标记的硬换行符。

Answer 5

解决方案

使用此代码

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

Answer 6

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

Answer 7

改善@Luca Filosofi的接受答案，

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

Answer 8

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

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

该物业于2016年成为标准，并得到现代浏览器的良好支持。 Can I Use：当我发布此答案时，全球覆盖率为97％。

Answer 9

此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

jQuery将换行符转换为br（相当于nl2br）

9 个答案: