我怎样才能像这种格式一样将此文本区域值（内容）转换为 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|\\r\\n)/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>中每一行的匹配文本。

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