文字列で改行（\ n）を使用し、HTMLで同じものをレンダリングする

87

私は文字列を言います

string display_txt = "1st line text" +"\n" + "2nd line text";

Jqueryで、私は使用しようとしています

('#somediv').html(display_txt).css("color", "green")

メッセージが2行で表示されることを非常に明確に期待していますが、代わりに\ nがメッセージに表示されています。そのための簡単な修正はありますか？

ありがとう、

— KeenUser
ソース

1

非常に明確です、答えはあなたの質問にあります、あなたはdivのエラーメッセージをhtmlとしてレンダリングしようとしているので、あなたは<br />タグを使うことができます

— Murtaza 2011

2行を期待することに「かなり明確」なものは何もありません。それどころか、改行がプレーンスペースとしてレンダリングされ、必要な場合にのみ行を折り返すことは非常に明白です。それはHTMLがどのように機能するかであり、もちろんそれはどのように.html機能するかもです。

2

文字列を「1行目テキスト」と「2行目テキスト」として保存したコンテキストで、htmlの動作ではなく、2行でこれらが必要なことは明らかでした:)ありがとうございます。

— keenUser 2011

関連：stackoverflow.com/questions/9726970/...

— frederj

79

<br />htmlの改行に使用：

display_txt = display_txt.replace(/\n/g, "<br />");

— サミッチ
ソース

1

何らかの理由で、「\ n」を「\\ n」としてエスケープする必要があります。そうしないと、機能しません。（Chrome 46でテスト済み）。理由は何ですか？

— Sujay Phadke 2015

2

これは\n、文字列内の文字の最初の出現のみを置き換えることに注意してください。MDNドキュメントを

— Dominic Boulanger 2016年

3

最善.replace(/\n/g, "<br />")は、より多くの改行を防ぐことです。

— KingRider 2016

2

@vsyncの答えは受け入れられるべきだと思います。

— AyushKumar19年

完璧に動作しました。ありがとうございました。

— joshlsullivan

173

テーブルセルのCSSを次のように設定します

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

スニペットを展開

— vsync
ソース

6

それで、これは受け入れられた答えであるはずではありませんか？LE：これはIE 8以降のリンク

— gciochina 2016年

4

この答えは、XSSの脆弱性を引き起こさないため、innerHTMLを設定するよりもはるかに優れています。

— LinusK 2016年

4

さらに、white-space:pre-line;空白のシーケンスが単一の空白に折りたたまれるので使用できます。テキストは必要に応じて折り返され、改行されます。詳細情報：https

— //www.w3schools.com/cssref/pr_text_white-space.asp

この回答は、テキスト内の\ nを改行に変換しません

— irl_irl 2017

2

@ ste_irl-どういう意味ですか？\n手段新しい行が印刷されなければならないと、それを印刷しない

— VSYNC

6

divの代わりにpreタグを使用できます。これにより、\ nが正しい方法で自動的に表示されます。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

— フランク・イム・ヴァルト
ソース

1

多分.text代わりに.html？

0

データベースからデータをフェッチしていて、を含む文字列を表示したいという次の問題がありました\n。上記の解決策はどれも私にはうまくいきませんでした、そして私は最終的に解決策を思いつきました：https：//stackoverflow.com/a/61484190/7251208

— ケビンHグリフィス
ソース