Como substituir quebras de linha por tag
com JavaScript

Neste artigo você vai aprender a como substituir quebras de linha por tag <br> com JavaScript, para a string ganhar quebras de linha na página com HTML

Fala programador(a), beleza? Bora aprender mais sobre manipulação de string com JavaScript!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

A ideia é substituir as quebras de linha em uma string como esta:

const str = `Esta 
String
tem quebras de linha`

Para ficar como esta:

const str = `Esta 
<br>
String
<br>
tem quebras de linha`

Então como podemos fazer isso? É facil! Basta aplicar o método replace nas quebras de linhas

Fazendo o replace destes line breaks por tags <br>

Que no HTML são interpretadas por quebras de linhas

Veja o código necessário para realizar esta ação:

const strLineBreak = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

Este código substitui todas as quebras de linha em nossa string JS, e entrega o que precisamos 🙂

Conclusão

Neste artigo você aprendeu a como substituir quebras de linha por tag <br> em JS

Trocamos as quebras com a função replace, que pode ser utilizadas em strings

Desta maneira temos agora tags br na string, que no HTML são interpretadas como novas linhas

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!