获取textarea值并添加br和空格-JQuery

Question

我只需要在另一个div中显示textarea值作为实时预览。

克隆textarea值并附加到另一个div

需要实现两件事，但第一件事已部分实现

1. 键入回车键时，在文本之间添加br标记(完成(
2. 键入空格键时，在文本之间添加空格(如果您多次键入空格键，则现在只显示一个空格(

jsfiddle

$('textarea').keyup(function(e){   
//console.log(e)
let content = e.target.value.replace(/rn|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>

Answer 1

您可以使用replaceAll((来替换空白：

$('textarea').keyup(function(e){   
let content = e.target.value.replaceAll(" ", "&nbsp;").replace(/rn|r|n/g, "<br />")
$('.content').html(content);
});

Answer 2

只需添加pre标记即可保留空格。

$('textarea').keyup(function(e){   
//console.log(e)
let content = e.target.value.replace(/rn|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>

Answer 3

只需将div标记替换为pre标记。并且也不需要使用CCD_ 4函数。