jQuery改行をbrに変換（nl2brに相当）

私はjQueryにいくつかのtextareaコンテンツを取り、それをliに挿入させています。

改行を視覚的に保持したい。

これを行うには本当に簡単な方法があるはずです...

デモ： 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

あなたは単に行うことができます：

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;

なぜ2つのルールがpre-line影響するのか：改行のみに影響する（手がかり、@ KevinPauliに感謝）。IE6-7およびその他の古いブラウザpreはnowrap、複数のスペースを含めてレンダリングする、より極端なものにフォールバックします。これらおよびその他の設定の詳細（pre-wrap）は、mozillaおよびcss-tricksにあります（@Sablefosteに感謝）。

私は一般に、質問に答えるのではなく、2番目に推測する SOの好みを嫌いますが、この場合、改行を<br>マークアップに置き換えると、洗浄されていないユーザー入力によるインジェクション攻撃に対する脆弱性が高まる可能性があります。あなたは文字通りの質問が意味しなければならないことを意味する.text()呼び出しを変更していることに気づくときはいつでも真っ赤な線を越えています.html()。（この点を強調してくれた@AlexSに感謝します。）その時点でセキュリティリスクを除外していても、将来の変更により無意識のうちにそれが導入される可能性があります。代わりに、このCSSでは、より安全なを使用して、マークアップなしでハードな改行を取得できます.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]?)と、タグの直後に改行が続くだけでなく、改行がタグといくつかの空白の後にある場合の単一ケースになります。

改行を維持してDOMのtextareaからテキストを挿入する別の方法は、ノードとその子孫のレンダリングされたテキストコンテンツを表すNode.innerTextプロパティを使用することです。

ゲッターとして、ユーザーがカーソルで要素のコンテンツを強調表示してクリップボードにコピーした場合に表示されるテキストを概算します。

このプロパティは2016年に標準になり、最新のブラウザで十分にサポートされています。使用できます：この回答を投稿したとき、97％のグローバルカバレッジ