Caractère de nouvelle ligne de chaîne JavaScript?


424

La \nséquence de caractères de nouvelle ligne universelle est-elle en Javascript pour toutes les plateformes? Sinon, comment puis-je déterminer le caractère de l'environnement actuel?

Je ne pose pas de question sur l'élément HTML newline ( <BR/>). Je pose des questions sur la séquence de caractères de nouvelle ligne utilisée dans les chaînes JavaScript.


5
J'ai un contrôle d'entrée multiligne où l'utilisateur est censé entrer une liste séparée par des sauts de ligne. J'ai besoin d'analyser la liste en divisant d'abord la chaîne sur les sauts de ligne.
Landon Kuhn

7
@ landon9720: Pour mes contrôles d'entrée multiligne, j'ai une getValuefonction qui prend le valueet retourne value.replace(/\r\n/g,'\n')- juste pour garder la sortie cohérente sur tous les navigateurs / plates-formes.
Roy Tinker

1
Bonne question surtout pour ceux qui débutent en programmation! En dehors de HTML et en JavaScript, il est bon de savoir comment passer à la ligne suivante / nouvelle.
Eric Bishard

Réponses:


362

Je viens de tester quelques navigateurs en utilisant ce peu idiot de JavaScript:

function log_newline(msg, test_value) {
  if (!test_value) { 
    test_value = document.getElementById('test').value;
  }
  console.log(msg + ': ' + (test_value.match(/\r/) ? 'CR' : '')
              + ' ' + (test_value.match(/\n/) ? 'LF' : ''));
}

log_newline('HTML source');
log_newline('JS string', "foo\nbar");
log_newline('JS template literal', `bar
baz`);
<textarea id="test" name="test">

</textarea>

IE8 et Opera 9 sous Windows \r\n. Tous les autres navigateurs que j'ai testés (Safari 4 et Firefox 3.5 sous Windows et Firefox 3.0 sous Linux) utilisent \n. Ils peuvent tous très bien gérer \nlors de la définition de la valeur, bien qu'IE et Opera le reconvertissent en \r\ninterne. Il y a un article SitePoint avec plus de détails appelé les fins de ligne en Javascript .

Notez également que cela est indépendant des fins de ligne réelles dans le fichier HTML lui-même (les deux \net \r\ndonnent les mêmes résultats).

Lors de la soumission d'un formulaire, tous les navigateurs canonisent les sauts de ligne %0D%0Adans l'encodage URL. Pour voir cela, chargez par exemple data:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>et appuyez sur le bouton Soumettre. (Certains navigateurs bloquent la charge de la page envoyée, mais vous pouvez voir les valeurs des formulaires encodés par URL dans la console.)

Je ne pense pas que vous ayez vraiment besoin de faire beaucoup de détermination, cependant. Si vous souhaitez simplement diviser le texte sur les nouvelles lignes, vous pouvez faire quelque chose comme ceci:

lines = foo.value.split(/\r\n|\r|\n/g);

14
A fonctionné pour moi, a dû utiliser le drapeau global cependant: / \ r \ n | \ r | \ n / g
AdrianoFerrari

17
@Edson et faux, car il traitera \r\ncomme deux nouvelles lignes au lieu d'une. Si vous voulez faire court, le /\r?\n/gfera probablement (qui utilise quand même Mac OS 9?).
mercator

1
Étant donné que l'article SitePoint date de 2004, les informations qu'il contient peuvent ne pas être pertinentes pour les implémentations JS actuelles.
cbmanica

Le match est censé être beaucoup plus rapide que le split: jsperf.com/regex-split-vs-match
Wilt

Cela semble exagéré, voir ma réponse ci-dessous pour une solution plus simple!
Qasim

81

Oui, c'est universel.

Bien qu'il s'agisse '\n'des caractères de nouvelle ligne universels , vous devez garder à l'esprit que, selon votre saisie, les nouveaux caractères de ligne peuvent être précédés de caractères de retour chariot ( '\r').


55
\ n est le caractère de saut de ligne universel (LF). La séquence d'octets de nouvelle ligne exacte dépend de la plate-forme (\ r \ n, \ n ou \ r: en.wikipedia.org/wiki/Newline ). Et c'est la question que Landon pose. Vous vous contredisez lorsque vous dites pour la première fois qu'il s'agit du caractère de nouvelle ligne universel, et que vous dites ensuite qu'il peut être précédé d'un CR. Laquelle est-ce?
mercator

2
\ n est le caractère de nouvelle ligne (saut de ligne), même s'il est précédé d'un retour chariot. CR ne doit jamais être utilisé seul, bien que la plupart des API et applications Windows le analysent comme une nouvelle ligne. LF fonctionne aussi bien sous Windows. CR n'est qu'un artefact de l'époque où les ordinateurs n'étaient que des machines à écrire électroniques.
GolezTrol

3
@GolezTrol Il existe des raisons valables d'utiliser CR seul. Par exemple, revenir au début de la ligne dans une fenêtre de console afin d'écraser la ligne, sans passer à la ligne suivante. Ceci est souvent utilisé pour écrire des indicateurs de progression en pourcentage dans les utilitaires de ligne de commande.
Dan Bechard

2
@Dan Merci pour les commentaires. Bien sûr, je n'aurais jamais dû dire "jamais", car il existe en effet des applications pour un CR à lui seul. Mais la question concerne Javascript et non les utilitaires de ligne de commande. Bien sûr, il peut y avoir un script exécuté en mode CLI (bien que je ne sache pas si CR fonctionnera comme vous l'avez dit alors), et vous pouvez même utiliser Javascript pour générer un script qui s'exécute en ligne de commande. Ce sont des exceptions possibles à la règle, mais dans le contexte de la question, elles ne semblent pas s'appliquer. Néanmoins, merci de l'avoir mentionné.
GolezTrol

65

N'utilisez pas "\ n". Essayez ceci:

var string = "this\
is a multi\
line\
string";

Entrez simplement dans une barre oblique inverse et continuez à rouler! Fonctionne comme un charme.


ES6 prend également en charge les valeurs multilignes avec le tildecaractère (autrement appelé backtick).
Qasim

10
@Qasim - Pour info, je crois que tilde et backtick sont des personnages différents, voir ~Tilde vs `Backtick .
Chris Burgess

1
Ah - Ouais, tu as raison. ES6 utilise le caractère backtick pour les chaînes multilignes
Qasim

2
Bien que légal, cela est mal vu dans les cercles JS. Il manque de lisibilité. si vous le pouvez, utilisez les backticks d'ES6. Sinon, \ n
gotofritz

3
Lors de l'écriture de code, cela fonctionne. Il semble cependant que l'OP consiste à analyser le texte d'une zone de texte.
jinglesthula

53

Il peut être plus simple de gérer uniquement toutes les casse du nouveau caractère de ligne au lieu de vérifier quel cas puis de l'appliquer. Par exemple, si vous devez remplacer la nouvelle ligne, procédez comme suit:

htmlstring = stringContainingNewLines.replace(/(\r\n|\n|\r)/gm, "<br>");

1
Superbe. Fonctionne très bien dans les versions ultérieures FF et IE (pas encore testé les anciennes versions)
EvilDr


13

Fonction de lien e-mail que j'utilise "% 0D% 0A"

function sendMail() {   
var bodydata="Before "+ "%0D%0A";
    bodydata+="After"

var MailMSG = "mailto:aaa@sss.com" 
         + "?cc=07@sss.com" 
         + "&subject=subject" 
         + "&body=" + bodydata; 
window.location.href = MailMSG; 
} 

[HTML]

<a href="#" onClick="sendMail()">Contact Us</a>

quelqu'un connaît ce type de code pour la touche de tabulation? j'ai essayé "% 0D% 09" mais ne fonctionne pas.
Nilay

7

Obtenez un séparateur de ligne pour le navigateur actuel:

function getLineSeparator() {
  var textarea = document.createElement("textarea");
  textarea.value = "\n"; 
  return textarea.value;
}

3
Et alors return textarea.value;?
XP1

Est-ce que l'utilisation JSON.stringifydu résultat changera le personnage? Si j'essaie de voir le résultat dans un alert()appel, il ne me montre pas le caractère à moins que je ne le strifie d'abord (pas que le caractère doit être lisible par l'homme pour être efficace, bien sûr)

4

Remarque - lorsque vous utilisez ExtendScript JavaScript (le langage de script Adobe utilisé dans des applications comme Photoshop CS3 +), le caractère à utiliser est "\ r". "\ n" sera interprété comme un caractère de police, et de nombreuses polices auront donc un caractère de bloc à la place.

Par exemple (pour sélectionner une couche nommée 'Note' et ajouter des sauts de ligne après toutes les périodes):

var layerText = app.activeDocument.artLayers.getByName('Note').textItem.contents;
layerText = layerText.replace(/\. /g,".\r");

J'essayais de comprendre pourquoi \net <br/>ne fonctionnais pas dans mon script Photoshop ... Merci!
Jake Stoeffler

3

Vous pouvez utiliser des `` guillemets (qui sont en dessous du bouton Echap) avec ES6. Vous pouvez donc écrire quelque chose comme ceci:

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;

1

Je pense que c'est le cas - lorsque vous travaillez avec des chaînes JS.

Si vous générez du HTML, cependant, vous devrez utiliser des <br />balises (non \n, car vous ne traitez plus avec JS)


1

J'ai eu le problème d'exprimer la nouvelle ligne avec \ n ou \ r \ n .
Par magie, le caractère \ r utilisé pour le retour chariot fonctionne pour moi comme une nouvelle ligne.
Dans certains cas, il est donc utile de considérer également \ r.


Cela se produit si votre chaîne a le jeu de caractères ISO-8859-1
CodeBrauer

0
printAccountSummary: function()
        {return "Welcome!" + "\n" + "Your balance is currently $1000 and your interest rate is 1%."}
};
console.log(savingsAccount.printAccountSummary()); // method

Tirages:

Welcome!
Your balance is currently $1000 and your interest rate is 1%.

0

Une observation pratique ... Dans mon script NodeJS j'ai la fonction suivante:

function writeToLogFile (message) {
    fs.appendFile('myserverlog.txt', Date() + " " + message + "\r\n", function (err) {
        if (err) throw err;
    });
}

Au début, je n'avais que "\ n" mais j'ai remarqué que lorsque j'ouvre le fichier journal dans le Bloc-notes, il affiche toutes les entrées sur la même ligne. Notepad ++, d'autre part, affiche les entrées chacune sur leur propre ligne. Après avoir changé le code en "\ r \ n", même le Bloc-notes affiche chaque entrée sur sa propre ligne.


-3

C'est \ntrès bien pour tous les cas que j'ai rencontrés. Si vous travaillez avec le Web, utilisez-le \net ne vous en faites pas (sauf si vous avez eu des problèmes liés à la nouvelle ligne).


-13

vous pouvez utiliser <br/>et document.write/, document.writelnun.


4
Veuillez relire la question. Il dit spécifiquement qu'il ne pose pas de questions sur<br>
Leigh
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.