Usando nova linha (\ n) em string e renderizando a mesma em HTML

87

Eu tenho uma string dizer

string display_txt = "1st line text" +"\n" + "2nd line text";

no Jquery, estou tentando usar

('#somediv').html(display_txt).css("color", "green")

claramente, espero que minha mensagem seja exibida em 2 linhas, mas em vez disso, \ n está sendo exibida na mensagem. Alguma solução rápida para isso?

Obrigado,

— KeenUser
fonte

1

Muito claro, a resposta está na sua pergunta, você está tentando processar a mensagem de erro em div como html, então você pode usar <br />tag

— Murtaza

Não há nada "muito claro" em esperar duas linhas. Ao contrário, é bastante claro que a nova linha será renderizada como espaço simples, apenas quebrando a linha se necessário. É assim que o HTML funciona, claro que também .htmlfunciona.

2

Eu apenas quis dizer com o contexto em que armazenei minha string como "texto de primeira linha" e "texto de segunda linha", ficou claro que eu quero isso em 2 linhas, não em relação ao funcionamento do html :) obrigado.

— KeenUser de

relacionado: stackoverflow.com/questions/9726970/…

— frederj

79

Use <br />para nova linha em html:

display_txt = display_txt.replace(/\n/g, "<br />");

— Samich
fonte

1

por algum motivo, preciso escapar do "\ n" como "\\ n" ou então não funciona. (testado no Chrome 46). Alguma razão para quê?

— Sujay Phadke

2

Observe que isso substituirá apenas a primeira ocorrência do \ncaractere dentro da string. Veja a documentação MDN

— Dominic Boulanger

3

o melhor .replace(/\n/g, "<br />")é evitar mais novas linhas.

— KingRider

2

Acho que a resposta do @vsync deve ser a aceita.

— Ayush Kumar

Funcionou perfeitamente. Obrigado.

— joshlsullivan

174

Defina seu css na célula da tabela para

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

Expandir snippet

— vsync
fonte

6

então essa não deveria ser a resposta aceita? LE: Vejo que isso só é compatível com o link do

— gciochina

4

Essa resposta é muito melhor do que definir o innerHTML, porque não causa uma vulnerabilidade de XSS.

— LinusK

4

Além disso, você pode usar white-space:pre-line;as sequências de espaços em branco que se transformarão em um único espaço em branco. O texto será quebrado quando necessário e nas quebras de linha. Mais informações em: https://www.w3schools.com/cssref/pr_text_white-space.asp

— HakuteiJ

Esta resposta não converte \ n dentro do texto em uma nova linha

— irl_irl

2

@ste_irl - o que você quer dizer? isso \nsignifica que uma nova linha deve ser impressa e ela a imprime

— vsync

6

Você pode usar uma tag pre em vez de uma div. Isso exibiria automaticamente seus \ n's da maneira correta.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

— Frank im Wald
fonte

1

Talvez em .textvez de .html?

0

Eu tive o seguinte problema onde estava buscando dados de um banco de dados e queria exibir uma string contendo \n. Nenhuma das soluções acima funcionou para mim e finalmente encontrei uma solução: https://stackoverflow.com/a/61484190/7251208

— Kevin H Griffith
fonte