Używanie nowej linii (\ n) w łańcuchu i renderowanie tego samego w HTML

Question 1

Mam do powiedzenia ciąg

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

w Jquery próbuję użyć

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

całkiem wyraźnie oczekuję, że moja wiadomość zostanie wyświetlona w dwóch wierszach, ale zamiast tego \ n jest wyświetlana w wiadomości. Jakieś szybkie poprawki?

Dzięki,

Question 2

Użyj  dla nowej linii w html:

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

Question 3

Ustaw swój css w komórce tabeli na

white-space:pre-wrap;

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

body{ white-space:pre-wrap; }

Rozwiń fragment

Question 4

Możesz użyć znacznika wstępnego zamiast elementu div. To automatycznie wyświetli twoje \ n we właściwy sposób.

<!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>

Question 5

Może .textzamiast .html?

Question 6

Miałem następujący problem, w którym pobierałem dane z bazy danych i chciałem wyświetlić ciąg zawierający \n. Żadne z powyższych rozwiązań nie zadziałało i wreszcie znalazłem rozwiązanie: https://stackoverflow.com/a/61484190/7251208

Answer 1

87

Mam do powiedzenia ciąg

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

w Jquery próbuję użyć

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

całkiem wyraźnie oczekuję, że moja wiadomość zostanie wyświetlona w dwóch wierszach, ale zamiast tego \ n jest wyświetlana w wiadomości. Jakieś szybkie poprawki?

Dzięki,

jquery html string newline KeenUser
źródło

1

Całkiem jasne, odpowiedź jest w twoim pytaniu, próbujesz wyrenderować komunikat o błędzie w div jako html, więc możesz użyć  tagu

Murtaza

Nie ma nic „całkiem jasnego” w oczekiwaniu dwóch wierszy. Wręcz przeciwnie, jest całkiem jasne, że nowa linia zostanie wyrenderowana jako zwykła przestrzeń, zawijając ją tylko w razie potrzeby. Tak działa HTML, oczywiście tak też .htmldziała.

2

Miałem na myśli tylko kontekst, w którym zapisałem swój ciąg jako „tekst w pierwszej linii” i „tekst w drugiej linii”. Było jasne, że chcę je umieścić w 2 liniach, a nie w odniesieniu do działania html :) dziękuję.

KeenUser

related: stackoverflow.com/questions/9726970/…

frederj

Answer 2

1

Całkiem jasne, odpowiedź jest w twoim pytaniu, próbujesz wyrenderować komunikat o błędzie w div jako html, więc możesz użyć  tagu

Murtaza

Answer 3

Nie ma nic „całkiem jasnego” w oczekiwaniu dwóch wierszy. Wręcz przeciwnie, jest całkiem jasne, że nowa linia zostanie wyrenderowana jako zwykła przestrzeń, zawijając ją tylko w razie potrzeby. Tak działa HTML, oczywiście tak też .htmldziała.

Answer 4

2

Miałem na myśli tylko kontekst, w którym zapisałem swój ciąg jako „tekst w pierwszej linii” i „tekst w drugiej linii”. Było jasne, że chcę je umieścić w 2 liniach, a nie w odniesieniu do działania html :) dziękuję.

KeenUser

Answer 5

related: stackoverflow.com/questions/9726970/…

frederj

Answer 6

79

Użyj  dla nowej linii w html:

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

Samich
źródło

1

z jakiegoś powodu muszę uciec przed „\ n” jako „\\ n”, bo inaczej to nie zadziała. (testowane w Chrome 46). Jakiś powód dlaczego?

Sujay Phadke

2

Należy pamiętać, że spowoduje to zastąpienie tylko pierwszego wystąpienia \nznaku w ciągu. Zobacz dokumentację MDN

Dominic Boulanger,

3

najlepiej .replace(/\n/g, " ")jest zapobiegać tworzeniu nowej linii.

KingRider,

2

Myślę, że odpowiedź @vsync powinna być zaakceptowana.

Ayush Kumar

Działał doskonale. Dziękuję Ci.

joshlsullivan

Answer 7

1

z jakiegoś powodu muszę uciec przed „\ n” jako „\\ n”, bo inaczej to nie zadziała. (testowane w Chrome 46). Jakiś powód dlaczego?

Sujay Phadke

Answer 8

2

Należy pamiętać, że spowoduje to zastąpienie tylko pierwszego wystąpienia \nznaku w ciągu. Zobacz dokumentację MDN

Dominic Boulanger,

Answer 9

3

najlepiej .replace(/\n/g, " ")jest zapobiegać tworzeniu nowej linii.

KingRider,

Answer 10

2

Myślę, że odpowiedź @vsync powinna być zaakceptowana.

Ayush Kumar

Answer 11

Działał doskonale. Dziękuję Ci.

joshlsullivan

Answer 12

174

Ustaw swój css w komórce tabeli na

white-space:pre-wrap;

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

body{ white-space:pre-wrap; }

Rozwiń fragment

vsync
źródło

6

więc czy to nie powinna być akceptowana odpowiedź? LE: Widzę, że jest to obsługiwane tylko w łączu

gciochina

4

Ta odpowiedź jest o wiele lepsza niż ustawienie innerHTML, ponieważ nie powoduje luki w XSS.

LinusK

4

Poza tym możesz użyć, white-space:pre-line;ponieważ sekwencje białych znaków zostaną zwinięte w jedną białą spację. Tekst będzie zawijany w razie potrzeby i na podziałach wierszy. Więcej informacji na: https://www.w3schools.com/cssref/pr_text_white-space.asp

HakuteiJ

Ta odpowiedź nie konwertuje \ nw tekście do nowej linii

irl_irl,

2

@ste_irl - co masz na myśli? to \noznacza nowy wiersz powinien być wydrukowany i robi go wydrukować

vsync

Answer 13

6