div - title html css

Nueva línea en área de texto

Question

<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 renderizar el archivo html. ¿Cómo puedo hacer eso?

Answer 1

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

• 
 es (el valor HtmlEncoded de ASCII 10 o) el literal del carácter de avance de línea en una cadena HTML . Pero el carácter de avance de línea NO se procesa como un salto de línea en HTML (vea las notas al final).

• /n es el literal de caracteres de avance 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 invaliden con algunos estilos.

Esperemos que la siguiente illustration sea ​​más clara:

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 el HTML:

• El valor innderHTML del elemento TEXTAREA no innderHTML HTML. Intente lo siguiente: <textarea>A <a href=''x''>link</a>.</textarea> para ver.
• El elemento P representa todos los espacios en blanco contiguos (incluidas las nuevas líneas) como un espacio.
• El carácter LF no se representa en una nueva línea o salto de línea en HTML.
• TEXTAREA representa LF como una nueva línea dentro del cuadro de área de texto.

Answer 2

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

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

Answer 3

Es posible que desee utilizar /n lugar de /n .

Answer 4

He encontrado que String.fromCharCode(13, 10) útil cuando se utilizan 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 de nueva línea reales en ella y, por lo tanto, obliga al motor de visualización a generar una nueva línea en lugar de una versión de escape. Por ejemplo: utilizando el motor de visualización EJS de NodeJS: este es un ejemplo simple en el que se debe reemplazar cualquier / n:

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

Answer 5

Mi función .replace() 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,''
'');

// str: "Test

Test
Test"

Answer 6

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>

Answer 7

Prueba este:

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


 Línea de alimentación y 
 Retorno de carro son las entidades HTML de ^wikipedia . De esta manera, en realidad está analizando la nueva línea ("/ n") en lugar de mostrarla como texto.

Answer 8

Si está hablando de usar el valor del área de texto en algún otro lugar de su página y renderizar las nuevas líneas, encontré el espacio en blanco de CSS: pre-wrap; Trabajar muy bien, y es una solución simple. Tal vez esto ayude a alguien.

Answer 9

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>

Answer 10

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

Answer 11

solo usa <br>
ex:

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

resultado:
bla bla bla bla
kakakakakak
fafafafafaf

Answer 12

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

This is my statement2</textarea>

Violín que muestra que funciona: http://jsfiddle.net/trott/5vu28/ .

Si realmente desea que esto esté en una sola línea en el archivo de origen, 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>