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 >
Live textarea content here
</div>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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 >
Live textarea content here
</div>
</pre>