Utilisation d'une nouvelle ligne (\ n) dans la chaîne et rendu identique en HTML

87

J'ai une chaîne de mots

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

dans Jquery, j'essaye d'utiliser 

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

Je m'attends clairement à ce que mon msg soit affiché sur 2 lignes, mais à la place \ n est affiché dans le message. Des solutions rapides pour cela?

Merci,

jquery html string newline KeenUser
la source
1
Tout à fait clair, la réponse est dans votre question, vous essayez de rendre le message d'erreur en div en html, vous pouvez donc utiliser <br />tag
Murtaza
Il n'y a rien de "tout à fait clair" à attendre deux lignes. Au contraire, il est tout à fait clair que la nouvelle ligne sera rendue sous la forme d'un espace simple, enveloppant la ligne uniquement si nécessaire. C'est ainsi que fonctionne HTML, bien sûr, c'est aussi comment .htmlfonctionne.
2
Je voulais juste dire avec le contexte où j'ai stocké ma chaîne en tant que "texte de 1ère ligne" et "texte de 2ème ligne", il était clair que je les veux en 2 lignes, pas en ce qui concerne le fonctionnement du html :) merci.
KeenUser
en relation: stackoverflow.com/questions/9726970/…
frederj

Réponses:

79

Utiliser <br />pour une nouvelle ligne en html:

display_txt = display_txt.replace(/\n/g, "<br />");
Samich
la source
1
pour une raison quelconque, je dois échapper au "\ n" en tant que "\\ n" sinon cela ne fonctionne pas. (testé dans Chrome 46). Une raison pourquoi?
Sujay Phadke
2
Veuillez noter que cela ne remplacera que la première occurrence du \ncaractère à l'intérieur de la chaîne. Voir la documentation MDN
Dominic Boulanger
3
le mieux .replace(/\n/g, "<br />")est d'éviter plus de nouvelle ligne.
KingRider
2
Je pense que la réponse de @vsync devrait être acceptée.
Ayush Kumar
A parfaitement fonctionné. Merci.
joshlsullivan
174

Définissez votre css dans la cellule du tableau sur

white-space:pre-wrap;


document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }
Développer l'extrait

vsync
la source
6
alors n'est-ce pas censé être la réponse acceptée? LE: Je vois que cela n'est pris en charge que dans le lien
gciochina
4
Cette réponse est bien meilleure que la définition de innerHTML, car elle ne provoque pas de vulnérabilité XSS.
LinusK
4
En outre, vous pouvez utiliser des white-space:pre-line;séquences d'espaces qui se réduiront en un seul espace. Le texte sera enveloppé si nécessaire et sur les sauts de ligne. Plus d'informations sur: https://www.w3schools.com/cssref/pr_text_white-space.asp
HakuteiJ
Cette réponse ne convertit pas \ n dans le texte en une nouvelle ligne
irl_irl
2
@ste_irl - que voulez-vous dire? cela \nsignifie qu'une nouvelle ligne doit être imprimée et qu'elle l'imprime
vsync
6

Vous pouvez utiliser une balise pré au lieu d'un div. Cela afficherait automatiquement vos \ n de la manière correcte.

<!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
la source
1

Peut-être .textau lieu de .html?


la source
0

J'ai eu le problème suivant où je cherchais des données à partir d'une base de données et je voulais afficher une chaîne contenant \n. Aucune des solutions ci-dessus n'a fonctionné pour moi et j'ai finalement trouvé une solution: https://stackoverflow.com/a/61484190/7251208

Kevin H Griffith
la source