Tenho um arquivo json que em seu conteúdo ele contém parágrafos. Esses parágrafos são separados por \n
mas quando eu insiro o conteúdo os parágrafos não são separados e ao invés de quebra de linha eu tenho um espaço na DIV
. Ao meu ver a minha solução seria converter os \n
em quebras de linha que o HTML
entende (<p>
ou <br>
). Qual o método mais correto a ser usado?
-
4Perguntas sobre o que é mais correto são sempre mais complicadas. levam a respostas subjetivas. Não estou dizendo que a pergunta em sua forma geral não pode ser respondida. Estou vendo muitas perguntas justamente sobre o que é mais correto e nem sempre é fácil dizer isso. Dar uma solução correta fica mais fácil. Se você não sabe qual é o mais correto, como vai escolher a resposta a ser aceita?– Maniero ♦Commented 12/12/2013 às 13:00
-
existem inúmeras formas de tratar a minha necessidade acima, o que procuro é qual a forma mais utilizada, com a intenção de fazer uso de algum padrão geral ou de métodos mais atuais e viáveis @bigown.– Leandro Santiago GomesCommented 12/12/2013 às 13:43
-
Sua questão está sendo discutida aqui: meta.br.stackoverflow.com/questions/76/…. Seria interessante se você pudesse tentar melhorá-la para evitar interpretações erradas.– Maniero ♦Commented 12/12/2013 às 20:06
-
função nl2br do php, escrita em javascript: phpjs.org/functions/nl2br– Daniel OmineCommented 15/06/2015 às 6:03
4 Respostas
Qual o método mais correto a ser usado?
Mais correto em que sentido? Performance? Assertividade? Legibilidade?
Enfim, normalmente utiliza-se um replace tradicional do JavaScript (como visto aqui, aqui e aqui...).
Então no seu caso bastaria:
>>> "string\ncom\nquebras\nde\nlinha".replace(/\n/g, '<br />');
"string<br />com<br />quebras<br />de<br />linha"
Agora, para substituir quebras de linha*, e não apenas \n
é melhor utilizar:
>>> "Quebra de linha *nix.\nQuebra de linha Mac.\rQuebra de linha Windows.\r\n".replace(/\r\n|[\r\n]/g, '<br />');
"Quebra de linha *nix.<br />Quebra de linha Mac.<br />Quebra de linha Windows.<br />"
* Existem outros dois tipos de quebra de linha além do estilo *nix (\n
): \r
(estilo Mac antigo) e \r\n
(estilo Windows).
-
1
-
1@LeandroLUK Se tiver garantia de que suas quebras de linha são
\n
é o melhor mesmo (:– tallesCommented 12/12/2013 às 13:54 -
qual seria melhor quebra de linha a ser usada? (melhor qual a mais usada
\n
ou\r
) Commented 12/12/2013 às 15:15 -
1Se é você que está montando a string sugiro
\n
; já que\r
é muito raro, salvo engano meu só Macintosh antigos utilizam; e\r\n
apesar de ser comum em ambientes Windows é desnecessário, um caractere basta e é mais simples, já cansei de ver gente confundindo com\n\r
(que não existe).– tallesCommented 12/12/2013 às 15:31
Para substituir por <br/>
, faça:
result = result.replace(/\n/g, "<br/>");
Para substituir por <p>...</p>
:
result = "<p>" + result.replace(/\n/g, "</p><p>") + "</p>";
A melhor abordagem depende do que você quer, mas eu iria pela tag <p>
porque você poderia formatar com CSS e manipular mais facilmente com javascript.
-
-
4
-
1
\n
só é mostrado no final da do parágrafo @Gerra. se usasse como você informou a tag<p></p>
ele iria deixar um parágrafo em branco perdido no código, e talvez desformataria a página com um espaço sobrando. Commented 12/12/2013 às 13:42 -
-
1@LeandroLUK ele ta substituindo
\n
por</p><p>
observe que é o contrario do que você comentou. E incluindo<p>
no inicio e</p>
no final vai corretamente separar em parágrafos.– BrunoLMCommented 12/12/2013 às 14:43
Utilizando os métodos split
e join
também chega ao resultado:
>>> "Primeiro parágrafo.\nSegundo parágrafo.".split('\n').join('<br/>');
"Primeiro parágrafo.<br/>Segundo parágrafo."
let res = "Primeiro parágrafo.\nSegundo parágrafo.".split('\n').join('<br/>');
document.querySelector('#resultado').innerHTML = res;
<div id="resultado"></div>
Usando regular expression é possivel desta forma:
str = str.replaceAll("(\r\n|\n)", "<br />");
-
-
4Não existe função
replaceAll
em JavaScript. Sugestão de leitura: Como fazer replaceAll no javascript.– tallesCommented 12/12/2013 às 13:23