jQuery text()と改行について

と言えるようになりたい。

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

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

プログラミング
javascript html jquery
26日 12月 2010 в 11:41
まだビューはありません
質問へのコメント (2)

2015年です。 この時点でこの質問に対する正解は、CSSの「空白:プレライン」または「空白:プレラップ」を使用することです。 清潔でエレガント。 ペアをサポートするIEの最低バージョンは8です。

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

追伸< s> CSS3が一般的になるまで< / s>おそらく、初期および/または後続の白いスペースを手動で切り取る必要があります。

cleong
編集した答え 27日 1月 2019 в 4:24
解説 (13)

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>

。

José Roberto Araújo J&#2
編集した答え 17日 5月 2016 в 2:53
解説 (2)

私が使っているのはこちらです。

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"));
Peter V. Mørch
編集した答え 3日 6月 2014 в 6:36
解説 (5)

または、.htmlを使用し、<pre>タグでwrapしてみてください。

$(someElem).html('this\n has\n newlines').wrap('<pre />');
karim79
編集した答え 27日 12月 2010 в 12:03
解説 (1)

textの代わりに[html][1]を使用し、nの各出現箇所を
`で置き換えることができます。ただし、テキストを正しくエスケープする必要があります。


x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/
Mark Byers
編集した答え 26日 6月 2012 в 8:59
解説 (5)

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

これが私の機能です。

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);
解説 (1)

CSSホワイトスペースプロパティを使用することがおそらく最良のソリューションです。 FirebugまたはChrome Developer Toolsを使用して、表示されていた追加のパディングのソースを識別します。

解説 (0)

これを試して:

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