獲取 textarea 值並添加 br 和空格 - JQuery

Question

我只需要在另一個 div 中顯示 textarea 值作為實時預覽。

將 textarea 值和 append 克隆到另一個 div

需要實現兩件事，但第一件事是部分實現

1. 輸入回車鍵時，在文本之間添加 br 標簽（完成）
2. 鍵入空格鍵時，然后在文本之間添加空格（如果多次鍵入空格鍵，它現在只顯示一個空格）

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>

Answer 1

您可以使用 replaceAll() 替換空格：

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

Answer 2

只需將您的div標簽替換為pre標簽。 而且您也不需要使用replace function。

Answer 3

只需添加pre標簽以保留 de 空格。

 $('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>