Cadena de JavaScript carácter de nueva línea?

424

¿Es \nla secuencia universal de caracteres de nueva línea en Javascript para todas las plataformas? Si no, ¿cómo determino el carácter para el entorno actual?

No estoy preguntando sobre el elemento HTML de nueva línea ( <BR/>). Estoy preguntando sobre la secuencia de caracteres de nueva línea utilizada en las cadenas de JavaScript.

Landon Kuhn
fuente
55
Tengo un control de entrada multilínea donde se espera que el usuario ingrese una lista separada por una nueva línea. Necesito analizar la lista dividiendo primero la cadena en las nuevas líneas.
Landon Kuhn el
77
@ landon9720: Para mis controles de entrada multilínea, tengo una getValuefunción que toma valuey devuelve value.replace(/\r\n/g,'\n'), solo para mantener la salida consistente en navegadores / plataformas.
Roy Tinker
1
¡Buena pregunta especialmente para aquellos que son nuevos en la programación! Fuera de HTML y en JavaScript, es bueno saber cómo pasar a la línea siguiente / nueva.
Eric Bishard
Pedido npmjs.com/package/eol
ryanve

Respuestas:

362

Acabo de probar algunos navegadores con este poco tonto 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>

Uso de IE8 y Opera 9 en Windows \r\n. Todos los otros navegadores que probé (Safari 4 y Firefox 3.5 en Windows, y Firefox 3.0 en Linux) usan \n. Todos pueden manejar \nbien al establecer el valor, aunque IE y Opera lo volverán a convertir \r\ninternamente. Hay un artículo de SitePoint con algunos detalles más llamados Terminaciones de línea en Javascript .

Tenga en cuenta también que esto es independiente de las terminaciones de línea reales en el archivo HTML en sí (ambos \ny \r\ndan los mismos resultados).

Al enviar un formulario, todos los navegadores pueden canonizar nuevas líneas %0D%0Aen la codificación de URL. Para ver eso, cargue, por ejemplo, data:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>y presione el botón Enviar. (Algunos navegadores bloquean la carga de la página enviada, pero puede ver los valores de formulario codificados en URL en la consola).

Sin embargo, no creo que realmente necesites determinar mucho. Si solo desea dividir el texto en líneas nuevas, puede hacer algo como esto:

lines = foo.value.split(/\r\n|\r|\n/g);
mercator
fuente
14
Trabajó para mí, aunque tuve que usar la bandera global: / \ r \ n | \ r | \ n / g
AdrianoFerrari
17
@Edson y mal, ya que se tratará \r\ncomo dos líneas nuevas en lugar de una. Si quieres corto, /\r?\n/gprobablemente lo hará (¿quién todavía usa Mac OS 9 de todos modos?).
mercator
1
Dado que el artículo de SitePoint es de 2004, la información allí puede no ser relevante para las implementaciones actuales de JS.
cbmanica
Se supone que la coincidencia es mucho más rápida que la división: jsperf.com/regex-split-vs-match
Wilt
Esto parece excesivo, ¡mira mi respuesta a continuación para obtener una solución más simple!
Qasim
81

Si, es universal.

Aunque '\n'son los caracteres de línea nueva universales , debe tener en cuenta que, dependiendo de su entrada, los caracteres de línea nueva pueden estar precedidos por caracteres de retorno de carro ( '\r').

Sinan Taifour
fuente
55
\ n es el carácter de avance de línea universal (LF). La secuencia exacta de bytes de nueva línea depende de la plataforma (\ r \ n, \ n o \ r: en.wikipedia.org/wiki/Newline ). Y esa es la pregunta que Landon está haciendo. Te estás contradiciendo a ti mismo cuando dices por primera vez que es el personaje universal de nueva línea, y luego dices que puede estar precedido por un CR. ¿Cuál es?
mercator
2
\ n es el carácter de nueva línea (avance de línea), incluso si está precedido por un retorno de carro. CR nunca debe usarse solo, aunque la mayoría de las aplicaciones y aplicaciones de Windows lo analizarán como una nueva línea. LF funciona igual de bien en Windows también. CR es solo un artefacto de la época en que las computadoras eran simplemente máquinas de escribir electrónicas.
GolezTrol
3
@GolezTrol Hay razones válidas para usar CR por sí solo. Por ejemplo, volver al comienzo de la línea en una ventana de consola para sobrescribir la línea, sin pasar a la siguiente línea. Esto se usa a menudo para escribir indicadores de porcentaje de progreso cambiantes en las utilidades de línea de comandos.
Dan Bechard
2
@ Dan Gracias por los comentarios. Por supuesto, nunca debería haber dicho "nunca", porque de hecho hay aplicaciones para un CR por sí solo. Pero la pregunta es sobre Javascript, no sobre las utilidades de línea de comandos. Por supuesto, puede haber una secuencia de comandos ejecutándose en modo CLI (aunque no sé si CR funcionará como usted dijo entonces), e incluso puede usar Javascript para generar una secuencia de comandos que se ejecuta en la línea de comandos. Esas son posibles excepciones a la regla, pero en el contexto de la pregunta parecen no aplicarse. Sin embargo, gracias por mencionarlo.
GolezTrol
65

No uses "\ n". Solo intenta esto:

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

¡Solo ingresa una barra diagonal inversa y sigue caminando! Funciona de maravilla.

Qasim
fuente
ES6 también admite valores multilínea con el tildecarácter (también llamado backtick).
Qasim
10
@Qasim - Para tu información, creo que tilde y backtick son personajes diferentes, ver ~Tilde vs `Backtick .
Chris Burgess
1
Ah, sí, tienes razón. ES6 utiliza el carácter de retroceso para cadenas multilínea
Qasim
2
Aunque es legal, eso está mal visto en los círculos de JS. Carece de legibilidad. si puedes, usa los backticks de ES6. Si no, \ n
gotofritz
3
Al escribir código esto funciona. Sin embargo, parece que el OP se trata de analizar texto de un área de texto.
jinglesthula
53

Puede ser más fácil manejar todos los casos del nuevo carácter de línea en lugar de verificar qué caso y luego aplicarlo. Por ejemplo, si necesita reemplazar la nueva línea, haga lo siguiente:

htmlstring = stringContainingNewLines.replace(/(\r\n|\n|\r)/gm, "<br>");
Quincy
fuente
1
Soberbio. Funciona muy bien en versiones posteriores FF e IE (aunque no se probaron versiones anteriores)
EvilDr
25

sí, use \ n, a menos que esté generando código html, en el que desea usar <br />

Reclinable más fino
fuente
13

Función de enlace de correo electrónico, uso "% 0D% 0A"

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

var MailMSG = "mailto:[email protected]" 
         + "[email protected]" 
         + "&subject=subject" 
         + "&body=" + bodydata; 
window.location.href = MailMSG; 
} 

[HTML]

<a href="#" onClick="sendMail()">Contact Us</a>
ISCI
fuente
Alguien sabe este tipo de código para la tecla tab? Estoy probado "% 0D% 09" pero no funciona.
Nilay
7

Obtenga un separador de línea para el navegador actual:

function getLineSeparator() {
  var textarea = document.createElement("textarea");
  textarea.value = "\n"; 
  return textarea.value;
}
Vitalii Fedorenko
fuente
3
¿Qué tal return textarea.value;?
XP1
¿El uso JSON.stringifydel resultado cambiará el carácter? Si trato de ver el resultado en una alert()llamada, no me muestra el carácter, a menos que lo codifique primero (no es que el personaje deba ser legible por humanos para que sea efectivo, por supuesto)
4

Una nota: cuando se usa ExtendScript JavaScript (el lenguaje de secuencias de comandos de Adobe utilizado en aplicaciones como Photoshop CS3 +), el carácter a usar es "\ r". "\ n" se interpretará como un carácter de fuente y, por lo tanto, muchas fuentes tendrán un carácter de bloque.

Por ejemplo (para seleccionar una capa llamada 'Nota' y agregar saltos de línea después de todos los períodos):

var layerText = app.activeDocument.artLayers.getByName('Note').textItem.contents;
layerText = layerText.replace(/\. /g,".\r");
JayCrossler
fuente
Estaba tratando de entender por qué \ny <br/>no estaba trabajando en mi script de Photoshop ... ¡Gracias!
Jake Stoeffler
3

Puede usar `` comillas (que están debajo del botón Esc) con ES6. Entonces puedes escribir algo como esto:

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;
Bogdan Surai
fuente
1

Creo que es así, cuando trabajas con cadenas JS.

Sin embargo, si está generando HTML, tendrá que usar <br />etiquetas (no \n, ya que ya no está tratando con JS)

Pascal MARTIN
fuente
1

Tuve el problema de expresar nueva línea con \ n o \ r \ n .
Mágicamente el carácter \ r que se utiliza para el retorno de carro trabajó para mí como una nueva línea.
Entonces, en algunos casos, también es útil considerar \ r.

Oralet
fuente
Esto sucede si su cadena tiene el juego de caracteres 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

Huellas dactilares:

Welcome!
Your balance is currently $1000 and your interest rate is 1%.
Barbs G
fuente
0

Una observación práctica ... En mi script NodeJS tengo la siguiente función:

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

Primero solo tenía "\ n" pero noté que cuando abro el archivo de registro en el Bloc de notas, muestra todas las entradas en la misma línea. Notepad ++, por otro lado, muestra las entradas cada una en su propia línea. Después de cambiar el código a "\ r \ n", incluso el Bloc de notas muestra cada entrada en su propia línea.

usuario11717468
fuente
-3

El \nestá bien para todos los casos que he encontrado. Si está trabajando con la web, úselo \ny no se preocupe por ello (a menos que haya tenido problemas relacionados con la nueva línea).

zzandy
fuente
-13

puedes usar <br/>y el document.write/, document.writelnuno.

omari Powell
fuente
44
Por favor, vuelva a leer la pregunta. Se dice específicamente que se no se pregunta por<br>
Leigh