Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

85
Visualizações
Get textarea value and add br and space - JQuery

I just need to show textarea value in another div as a live preview.

clone the textarea value and append to another div

Need to achieve two things but first thing is partially achieved

  1. When typing enter key then add br tag between texts (Done)
  2. When typing space key then add space between texts (If you type space bar multiple times , it shows only single space now)

jsfiddle

$('textarea').keyup(function(e){   
//console.log(e)
    let content = e.target.value.replace(/\r\n|\r|\n/g, "<br />")
    $('.content').html(content);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="" id="" cols="30" rows="10"></textarea>

<div class="content">
Live textarea content here
</div>

about 4 years ago · Santiago Gelvez
3 Respostas
Responde à pergunta

0

You can use replaceAll() to replace white spaces :

$('textarea').keyup(function(e){   
    let content = e.target.value.replaceAll(" ", "&nbsp;").replace(/\r\n|\r|\n/g, "<br />")
    $('.content').html(content);
});
about 4 years ago · Santiago Gelvez Relatório

0

Just add pre tag to keep de spaces.

$('textarea').keyup(function(e){   
//console.log(e)
    let content = e.target.value.replace(/\r\n|\r|\n/g, "<br />")
    $('.content').html("<pre>"+content+"</pre>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="" id="" cols="30" rows="10"></textarea>

<pre> 
<div class="content">
Live textarea content here
</div>
</pre>

about 4 years ago · Santiago Gelvez Relatório

0

just replace your div tag to pre tag. and you dont need to use replace function also.

about 4 years ago · Santiago Gelvez Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda