173 votes

Comment ajouter des sauts de ligne à une zone de texte HTML

Je suis en train d'éditer un </code> avec JavaScript. Le problème est que lorsque je fais des sauts de ligne, ils ne s'affichent pas. Comment puis-je faire cela?</p> <p>Je reçois la valeur pour écrire une fonction, mais cela ne donne pas de sauts de ligne.</p></x-turndown>

0 votes

Démonstration de Codepen avec des solutions regex etexposées ici: codepen.io/a-guerrero/pen/grgVBo

298voto

TStamper Points 17163

Le problème vient du fait que les sauts de ligne (\n\r ?) ne sont pas les mêmes que les balises HTML:

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '');

Comme de nombreux commentaires et ma propre expérience me l'ont montré, cette solutionne fonctionne pas comme prévu. Voici un exemple d'ajout d'une nouvelle ligne à une textarea en utilisant '\r\n' :

function log(text) {
    var txtArea;

    txtArea = document.getElementById("txtDebug");
    txtArea.value += text + '\r\n';
}

7 votes

Cela fonctionne aussi pour moi. En jQuery, vous pouvez faire quelque chose comme ça : $('#caption').html($('#caption').text().replace(/\n\r?/g, '
'));

2 votes

La Regexp de saut de ligne devrait être /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php

0 votes

Si vous utilisez jQuery, je suggère d'utiliser .val - stackoverflow.com/questions/5583040/…

24voto

jit Points 333

Si vous utilisez JavaScript général et que vous devez assigner une chaîne de caractères à une valeur de zone de texte, alors document.getElementById("textareaid").value='texthere\\ntexttext'.

Vous devez remplacer \n ou < br > par \\\n.

Sinon, cela donne Uncaught SyntaxError: Caractère inattendu ILLEGAL dans tous les navigateurs.

20voto

0lukasz0 Points 1072

J'avais un problème avec les sauts de ligne qui étaient transmis d'une variable serveur à une variable JavaScript, puis JavaScript les écrivait dans un textarea (en utilisant des liaisons de valeur KnockoutJS).

La solution était de doubler les échappements des sauts de ligne :

original.Replace("\r\n", "\\r\\n")

sur le côté serveur, car avec juste des caractères d'échappement simples, JavaScript ne les interprétait pas.

0 votes

En utilisant "\\n" fonctionne pour moi sur Windows et je suppose que cela fonctionnera bien sur les systèmes Linux.

19voto

strubester Points 77

Vous devez utiliser \n pour les sauts de ligne à l'intérieur d'une zone de texte

0 votes

Fonctionne dans Firefox v71. Merci!

2voto

Aaron Digulla Points 143830

Une nouvelle ligne est simplement de l'espace vide pour le navigateur et ne sera pas traitée différemment qu'un espace normal (" "). Pour obtenir une nouvelle ligne, vous devez insérer des éléments.

Une autre tentative pour résoudre le problème : tapez le texte dans la zone de texte, puis ajoutez un peu de JavaScript derrière un bouton pour convertir les caractères invisibles en quelque chose de lisible et afficher le résultat dans un DIV. Cela vous dira ce que votre navigateur attend.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X