我怎么能得到这个textarea值(内容)到DIV像这样的格式

Question

这是一个简单的文本区域和按钮，我试图将文本区域值(内容)发送到<div id="rs"></div>与文本区域框的每一个单独的行(这意味着当我们输入按钮或换行时，然后所有行)附加到div到单独的新元素。

例如，点击addText按钮后，我希望我的输出结构如下:

<div id="rs">
<div class='rslines'> first line of textarea- abc </div>
<div class='rslines'> second line of textarea- def </div>
<div class='rslines'> third line of textarea- ghi </div>
..... and so on
</div>

我应该修改的代码:

$('#addtext').click(function(){
var content = $("#cmt_content").val().replace(/(n|r|rn)/g, "<div class='rslines'></div>");
$('#rs').append(content);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<textarea id="cmt_content" rows="10" cols="60"></textarea>
<br> 
<button id="addtext">
addText
</button>

<div id="rs"></div>

只是在这个时候，我得到<div class='rslines'> </div>之外的所有行，但我想要这个div内的所有行。

Answer 1

不匹配换行符，而是匹配一行上的所有内容-使用.+，您将匹配除换行符以外的任何字符，然后您可以替换为<div class='rslines'>$&</div>，将每行的匹配文本放入<div>s中。

$('#addtext').click(function(){
var content = $("#cmt_content").val().replace(/.+/g, "<div class='rslines'>$&</div>");
$('#rs').append(content);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<textarea id="cmt_content" rows="10" cols="60"></textarea>
<br> 
<button id="addtext">
addText
</button>

<div id="rs"></div>