Utilizzo della nuova riga (\ n) nella stringa e rendering dello stesso in HTML

87

Ho una stringa da dire

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

in Jquery, sto cercando di utilizzare

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

abbastanza chiaramente mi aspetto che il mio messaggio venga visualizzato su 2 righe, ma invece \ n viene visualizzato nel messaggio. Qualche soluzione rapida per questo?

Grazie,

— KeenUser
fonte

1

Abbastanza chiaro, la risposta è nella tua domanda, stai cercando di rendere il messaggio di errore in div come html, quindi puoi usare il <br />tag

— Murtaza

Non c'è niente di "abbastanza chiaro" nell'aspettarsi due righe. Al contrario, è abbastanza chiaro che la nuova riga sarà resa come spazio semplice, avvolgendo la riga solo se necessario. È come funziona l'HTML, ovviamente è anche come .htmlfunziona.

2

Intendevo solo con il contesto in cui ho memorizzato la mia stringa come "testo di prima riga" e "testo di seconda riga", era chiaro che li voglio in 2 righe, non rispetto a come funziona html :) grazie.

— KeenUser

correlato: stackoverflow.com/questions/9726970/...

— frederj

79

Usa <br />per la nuova riga in html:

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

— Samich
fonte

1

per qualche motivo, devo sfuggire a "\ n" come "\\ n" altrimenti non funziona. (testato in Chrome 46). Qualche motivo per cui?

— Sujay Phadke

2

Si noti che questo sostituirà solo la prima occorrenza del \ncarattere all'interno della stringa. Vedi la documentazione MDN

— Dominic Boulanger

3

meglio .replace(/\n/g, "<br />")è prevenire più newline.

— KingRider

2

Penso che la risposta di @vsync dovrebbe essere quella accettata.

— Ayush Kumar

Ha funzionato perfettamente. Grazie.

— joshlsullivan

174

Imposta il tuo css nella cella della tabella su

white-space:pre-wrap;

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

body{ white-space:pre-wrap; }

Espandi lo snippet

— vsync
fonte

6

quindi non dovrebbe essere questa la risposta accettata? LE: Vedo che questo è supportato solo nel collegamento

— gciochina

4

Questa risposta è molto meglio dell'impostazione di innerHTML, perché non causa una vulnerabilità XSS.

— LinusK

4

Inoltre, puoi usare white-space:pre-line;come sequenze di spazi bianchi che collasseranno in un unico spazio bianco. Il testo andrà a capo quando necessario e nelle interruzioni di riga. Maggiori informazioni su: https://www.w3schools.com/cssref/pr_text_white-space.asp

— HakuteiJ

Questa risposta non converte \ n all'interno del testo in una nuova riga

— irl_irl

2

@ste_irl - cosa intendi? i \nmezzi di una nuova linea devono essere stampate e lo fa stamparlo

— vsync

6

Potresti usare un pre tag invece di un div. Questo mostrerebbe automaticamente le tue \ n nel modo corretto.

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

1

Forse .textinvece di .html?

0

Ho avuto il seguente problema in cui stavo recuperando dati da un database e volevo visualizzare una stringa contenente \n. Nessuna delle soluzioni sopra ha funzionato per me e alla fine ho trovato una soluzione: https://stackoverflow.com/a/61484190/7251208

— Kevin H Griffith
fonte