jQuery text（）と改行

言えるようになりたい

$(someElem).text('this\n has\n newlines);

そしてそれはブラウザの改行でレンダリングします。私が見つけた唯一の回避策は、csEプロパティ 'white-space'をsomeElemで 'pre'に設定することです。これはほとんど機能しますが、パディングを0に設定しても、テキストとsomeElemの上部との間にうっとうしいほど大きなパディングがあります。これを取り除く方法はありますか？

それは2015年です。この時点でこの質問に対する正しい答えは、CSS white-space: pre-lineまたはを使用することwhite-space: pre-wrapです。クリーンでエレガント。ペアをサポートするIEの最低バージョンは8です。

https://css-tricks.com/almanac/properties/w/whitespace/

PS CSS3が一般的になるまでは、おそらく手動で初期および/または末尾の空白を削除する必要があります。

jQueryオブジェクトを変数に格納すると、次のようになります。

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

必要に応じて、jQuery.text（）と同じように、単純な呼び出しでこれを行う関数を作成することもできます。

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

これが私が使うものです：

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

また、使用してみ.htmlた後、ラップで<pre>タグ：

$(someElem).html('this\n has\n newlines').wrap('<pre />');

あなたは使用することができる html代わりに、textとの各発生置き換える\nとします<br>。ただし、テキストを正しくエスケープする必要があります。

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

とsomeElem置換する.html()と文字列内の他のHTMLタグも置換されるため、要素を直接操作することをお勧めします。

これが私の機能です：

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

それを呼び出す：

someElem = nl2br(someElem);

これを試して：

$(someElem).html('this<br> has<br> newlines);

CSSの空白スペースプロパティを使用するのがおそらく最良の解決策です。FirebugまたはChromeデベロッパーツールを使用して、表示されていた追加のパディングのソースを特定します。