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,

jquery html string newline 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

Respostas:

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?


fonte
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