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

Posted 2023-05-08

【中文标题】获取 textarea 值并添加 br 和空格 - JQuery

【英文标题】：Get textarea value and add br and space - JQuery

【发布时间】：2022-01-15 03:37:12

【问题描述】：

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

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

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

输入回车键时，在文本之间添加 br 标记（完成） 键入空格键时，在文本之间添加空格（如果多次键入空格键，现在只显示一个空格）

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>

【问题讨论】：

当我用空格写东西时它工作正常。什么不适合你？

当你输入多个空格键时，它只显示一个空格@CarstenLøvboAndersen

【参考方案1】：

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

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

【参考方案2】：

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

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

【讨论】：

你要么需要<pre>，要么需要replace()，而不是两者都需要

【参考方案3】：

只需将您的 div 标签替换为 pre 标签。 你也不需要使用replace函数。