Nova linha na á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>

Eu tentei ambos, mas a nova linha não está refletindo ao renderizar o arquivo html. Como eu posso fazer isso?

Respostas:


523

Tente este:

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

&#10;Alimentação de linha e &#13;retorno de carro são as entidades HTML da Wikipedia . Dessa forma, você está analisando a nova linha ("\ n") em vez de exibi-la como texto.


2
@LittleAlien jsfiddle.net/v0y3xvpx/1 - resposta com base na pergunta OP, obviamente problema foi resolvido
Bakudan

2
não é apenas o &#10;suficiente para analisar o \n?
Doug

Não depende do Windows vs. macOS se os caracteres de avanço de linha e retorno de carro são necessários ou mesmo analisados ​​corretamente?
SeizeTheDay

1
@SeizeTheDay sim, mas não é MacOS - é Linux / BSD vs Windows
Bakudan

@Bakudan Oh! Eu pensei que o macOS, baseado no Unix, ainda teria esse problema. Mas você está certo, a diferença é mais geral.
SeizeTheDay

27

Eu achei String.fromCharCode(13, 10)útil ao usar mecanismos de exibição. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Isso cria uma sequência com os caracteres de nova linha reais e força o mecanismo de exibição a produzir uma nova linha em vez de uma versão de escape. Por exemplo: Usando o mecanismo de exibição NodeJS EJS - Este é um exemplo simples no qual qualquer \ n deve ser substituído:

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>

Renderiza

<textarea>Blah
blah
blah</textarea>

substitua tudo:

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
A nova linha = String.fromCharCode (13, 10); é a única coisa que funcionou para mim ao adicionar nova linha programaticamente durante o tempo de execução. +1 nisso.
Ronen Rabinovici

3
Gostaria de sugerir talvez uma maneira mais simples de substituir tudo: var regExp = new RegExp (find, "gi"); str = str.replace (regExp, substitua);
Ronen Rabinovici

2
Eu fiz s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). Isso é mágico embora. Obrigado.
Glicerina

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

This is my statement2</textarea>

Violino mostrando que funciona: http://jsfiddle.net/trott/5vu28/ .

Se você realmente deseja que isso esteja em uma única linha no arquivo de origem, insira as referências de caracteres HTML para um feed de linha e um retorno de carro, conforme mostrado na resposta de @Bakudan:

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


21

Eu acho que você está confundindo a sintaxe de diferentes idiomas.

  • &#10;é (o valor HtmlEncoded de ASCII 10 ou) o caractere de avanço de linha literal em uma string HTML . Mas o caractere de avanço de linha NÃO é processado como uma quebra de linha em HTML (consulte as notas na parte inferior).

  • \né o literal de caractere de avanço de linha (ASCII 10) em uma string Javascript .

  • <br/>é uma quebra de linha em HTML. Muitos outros elementos, por exemplo <p>, <div>etc, também processam quebras de linha, a menos que sejam substituídos por alguns estilos.

Esperamos que a ilustração a seguir torne mais 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>

Alguns pontos a serem observados sobre o HTML:

  • O innerHTMLvalor do TEXTAREAelemento não processa Html. Tente o seguinte: <textarea>A <a href='x'>link</a>.</textarea>para ver.
  • O Pelemento renderiza todos os espaços em branco contíguos (incluindo novas linhas) como um espaço.
  • O caractere LF não é renderizado para uma nova linha ou quebra de linha em HTML.
  • O TEXTAREALF renderiza uma nova linha dentro da caixa da área de texto.

1
À primeira vista, este post parece complicado, mas na verdade contém muitas informações úteis. Se você está adicionando linhas progressivamente ao seu, <textarea/>este é o post que você precisa!
Morvael 15/08/19

<br/>é o que eu estava procurando
Johnny Cinco


7

tente isso .. funciona:

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

substituindo por
tags:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

3
é realmente $ ("textarea # test"). val (). replace (/ \ n / g, "& # 10;"); (isto irá substituir todas as ocorrências de nova linha)
Claudiu

7

Para obter uma nova linha dentro da área de texto, coloque uma quebra de linha real:

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


5

Você pode querer usar em \nvez de /n.


5
Bem, um literal \ntambém não funcionará, precisaria ser uma nova linha real .
Greg Hewgill

Sim, claro. Mas estou (incorretamente?) Assumindo que ele já sabia disso.
Zar

2

Após muitos testes, o código a seguir funciona para mim no 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);
}

0

Minha .replace()função usando os padrões descritos nas outras respostas não funcionou. O padrão que funcionou para o meu caso foi:

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 = "Posição do LF:" + t.valor.indexOf ("\ n");

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

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

<p id='p3'></p>

Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
Alex Riabov

-5

basta usar <br>
ex:

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

resultado:
blablablabla
kakakakakak
fafafafafaf

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.