Get textarea value and add br and space - JQuery

user_1403339 0
Viewed 138

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>

html jquery javascript
3 Answers

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);
});
user_125101730

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>

user_65421860

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

user_76646010
Related