と言えるようになりたい。
$(someElem).text('this\n has\n newlines);
で、ブラウザでは改行された状態でレンダリングされます。私が見つけた唯一の回避策は、someElemのcssプロパティ 'white-space' を 'pre' に設定することでした。これはほとんど機能しますが、paddingを0に設定しても、テキストとsomeElemの上部の間に迷惑なほど大きなpaddingが発生します。これを取り除く方法はありますか?
2015年です。 この時点でこの質問に対する正解は、CSSの「空白:プレライン」または「空白:プレラップ」を使用することです。 清潔でエレガント。 ペアをサポートするIEの最低バージョンは8です。
https://css-tricks.com/almanac/properties/w/whitespace/。
追伸< s> CSS3が一般的になるまで< / s>おそらく、初期および/または後続の白いスペースを手動で切り取る必要があります。
jQueryオブジェクトを変数に保存すると、次のことができます。
<。!-スニペットを開始:js hide:false -->。
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()が行うように、単純な呼び出しでこれを行う関数を作成することもできます。
<。!-スニペットを開始:js hide:false -->。
$.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"));
textの代わりに[
html][1]を使用し、
nの各出現箇所を
`で置き換えることができます。ただし、テキストを正しくエスケープする必要があります。
x = x.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/\n/g, '<br>');
.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);