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

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,

— 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ć <br />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

79

Użyj <br />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, "<br />")jest zapobiegać tworzeniu nowej linii.

— KingRider,

2

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

— Ayush Kumar

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

— joshlsullivan

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

6

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>

— Frank im Wald
źródło

1

Może .textzamiast .html?

0

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

— Kevin H. Griffith
źródło