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?

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.


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;
};

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>


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.

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


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;")));

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>


5

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


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);
}

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"

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>

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.