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,

— KeenUser
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

79

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

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

— Samich
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
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
source

1

Peut-être .textau lieu de .html?

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
source