web-dev-qa-db-ja.com

jQueryは改行をbrに変換します（nl2brに相当）

私はjQueryにいくつかのテキストエリアのコンテンツを取得させ、それをliに挿入しています。

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

これを行うには本当に簡単な方法が必要です...

javascriptjqueryline-breaks
104
gbhall

demo：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');
}
158
Luca Filosofi

簡単にできます：

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

あなたのコードにこれを入れてください（一般的なjs関数ライブラリにあることが望ましい）：

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

使用法：

var myString = "test\ntest2";

myString.nl2br();

文字列プロトタイプ関数を作成すると、任意の文字列でこれを使用できます。

28
jnl

contentを変更する代わりにrenderingを変更するという精神で、次のCSSは各改行は<br>のように動作します。

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

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

私は一般的にS.O.を嫌います。 質問を二番目に推測する の好みは、答えるのではなく、この場合、改行を<br>マークアップに置き換えると、インジェクション攻撃に対する脆弱性が増加する可能性がありますウォッシュされていないユーザー入力あり。 .text()呼び出しを.html()に変更していることに気づいたときは、真っ赤な線を横切っています。 （この点を強調してくれた@AlexSに感謝します。）その時点でセキュリティリスクを除外したとしても、将来の変更により意図せず導入される可能性があります。代わりに、このCSSを使用すると、より安全な.text()を使用して、マークアップなしでハード改行を取得できます。

21
Bob Stein

解決

このコードを使用

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

@Luca Filosofiの受け入れられた答えを改善するため、

必要に応じて、この正規表現の開始句を/([^>[\s]?\r\n]?)に変更すると、タグの直後に改行が続くのではなく、タグと空白の後に改行がある場合も含まれます

0
phlare

改行を保持したままDOMのテキストエリアからテキストを挿入する別の方法は、ノードとその子孫のrenderedテキストコンテンツを表す Node.innerText プロパティを使用することです。

ゲッターとして、ユーザーがカーソルで要素のコンテンツをハイライトし、クリップボードにコピーした場合に取得するテキストに近似します。

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

0
Volo

この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関数

0
Nick Tsai