Nueva línea en área de texto

281
<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

Intenté ambos, pero la nueva línea no se refleja al representar el archivo html. ¿Cómo puedo hacer eso?

discky
fuente

Respuestas:

523

Prueba este:

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

&#10;El avance de línea y el &#13;retorno de carro son entidades HTML de Wikipedia . De esta manera, en realidad está analizando la nueva línea ("\ n") en lugar de mostrarla como texto.

Bakudan
fuente
2
@LittleAlien jsfiddle.net/v0y3xvpx/1 - respuesta basada en la pregunta del OP, obviamente el problema fue resuelto
Bakudan
2
no es &#10;suficiente para analizar el \n?
Doug
¿No depende de Windows frente a macOS si los caracteres de avance de línea y de retorno de carro son necesarios, o incluso analizados correctamente?
SeizeTheDay
1
@SeizeTheDay sí, pero no es MacOS - es Linux / BSD vs Windows
Bakudan
@Bakudan ¡Oh! Pensé que macOS, al estar basado en Unix, todavía tendría ese problema. Pero estás seguro, la diferencia es más general.
SeizeTheDay
27

He encontrado String.fromCharCode(13, 10)útil al usar los motores de visualización. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Esto crea una cadena con los caracteres reales de nueva línea y obliga al motor de vista a generar una nueva línea en lugar de una versión con escape. Por ejemplo: Usar el motor de vista NodeJS EJS: este es un ejemplo simple en el que se debe reemplazar cualquier \ n:

viewHelper.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\\n', newline);
}

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

Renders

<textarea>Blah
blah
blah</textarea>

reemplaza todo:

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};
Daniel Flippance
fuente
1
La nueva línea = String.fromCharCode (13, 10); es lo único que funcionó para mí al agregar nueva línea programáticamente durante el tiempo de ejecución. +1 en eso.
Ronen Rabinovici
3
Me gustaría sugerir quizás una forma más simple de reemplazar todo: var regExp = new RegExp (find, "gi"); str = str.replace (regExp, replace);
Ronen Rabinovici
2
Lo hice s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). Sin embargo, esto es mágico. Gracias.
Glicerina
27
<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Fiddle que muestra que funciona: http://jsfiddle.net/trott/5vu28/ .

Si realmente desea que esto esté en una sola línea en el archivo fuente, puede insertar las referencias de caracteres HTML para un avance de línea y un retorno de carro como se muestra en la respuesta de @Bakudan:

  <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

Trott
fuente
22

Creo que estás confundiendo la sintaxis de diferentes idiomas.

  • &#10;es (el valor HtmlEncoded de ASCII 10 o) el literal de caracteres de salto de línea en una cadena HTML . Pero el carácter de avance de línea NO se representa como un salto de línea en HTML (ver notas al final).

  • \nes el literal de carácter de salto de línea (ASCII 10) en una cadena de Javascript .

  • <br/>es un salto de línea en HTML. Muchos otros elementos, por ejemplo <p>, <div>etc., también representan saltos de línea a menos que se reemplacen con algunos estilos.

Esperemos que la siguiente ilustración lo aclare:

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");
<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

Algunos puntos a tener en cuenta sobre Html:

  • El innerHTMLvalor del TEXTAREAelemento no representa HTML. Pruebe lo siguiente: <textarea>A <a href='x'>link</a>.</textarea>para ver.
  • El Pelemento representa todos los espacios en blanco contiguos (incluidas las nuevas líneas) como un espacio.
  • El carácter LF no se procesa en una nueva línea o salto de línea en HTML.
  • El TEXTAREArenders LF como una nueva línea dentro de la caja área de texto.
Viejo geezer
fuente
1
A primera vista, esta publicación parece complicada, pero en realidad contiene MUCHA información útil. Si estás agregando líneas de forma progamática a <textarea/>esta, ¡esta es la publicación que necesitas!
Morvael
<br/>es lo que estaba buscando
Johnny Five
14

Break ingrese la línea de palabras clave en Textarea usando CSS:

white-space: pre-wrap;
Suraj Kumar Maurya
fuente
1
Esto debería ser más alto
Rodney Salcedo
es el método más simple para lograr el resultado requerido, gracias @Suraj
Moaz Ateeq
Esta es la respuesta
anvd
7

prueba esto ... funciona:

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

reemplazando por
etiquetas:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));
Hareket de sal
fuente
3
en realidad es $ ("textarea # test"). val (). replace (/ \ n / g, "& # 10;"); (esto reemplazará todas las ocurrencias de una nueva línea)
Claudiu
7

Para obtener una nueva línea dentro del área de texto, coloque un salto de línea real allí:

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>

Jukka K. Korpela
fuente
5

Es posible que desee utilizar en \nlugar de /n.

Zar
fuente
55
Bueno, un literal \ntampoco funcionará, debería ser una nueva línea real .
Greg Hewgill
Sí, por supuesto. Pero (¿incorrectamente?) Supongo que él ya lo sabía.
Zar
2

Después de muchas pruebas, el siguiente código me funciona en Typecreipt

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}
Harry Sarshogh
fuente
0

Mi .replace()función usando los patrones descritos en las otras respuestas no funcionó. El patrón que funcionó para mi caso fue:

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"
Brunno Vodola Martins
fuente
0

T.innerText = "Posición de LF:" + t.value.indexOf ("\ n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>
Naresh Kumar
fuente
Si bien este código puede responder a la pregunta, proporcionar un contexto adicional con respecto a por qué y / o cómo este código responde a la pregunta mejora su valor a largo plazo.
Alex Riabov
-5

solo usa <br>
ex:

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

resultado:
blablablabla
kakakakakak
fafafafafaf

Lechani Houssam
fuente