在 jQuery / JavaScript 中的每一行末尾添加 标签答案

【问题标题】：Add tag after end of every line in jQuery / JavaScript在 jQuery / JavaScript 中的每一行末尾添加 标签
【发布时间】：2016-07-07 12:40:57
【问题描述】：

我有一个<textarea> 字段供用户输入。我要这个 - 当用户在该字段中粘贴他们的文本并单击某个按钮时，它将自动在每行末尾添加一个换行标记 。
我的 html 表单是这样的。

<div class="comment">
    <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
    <button type="button">Generate</button>
</div>

当用户将他们的文本粘贴到 textarea 字段时。

Lorem ipsum dolor sit amet，
consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam
修改 volutpat。

单击按钮时，它将如下所示。

Lorem ipsum dolor sit amet， 
consectetuer adipiscing elit,  
sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam 
Erat volutpat. 

帮帮我。

【问题讨论】：

当您复制粘贴到文本区域时，您的输入是否有回车？还是您希望generate 按钮自动计算线条大小并插入换行符？
任何方法都可以。点击生成对我来说很容易理解。
再次阅读我的问题。下面的大多数答案都假设（由于您的输入不明确）输入中已经包含换行符（\n）。您的输入是要根据 textarea 的宽度分成多行的单行，还是已经具有所需的换行符？
用户将从网站复制和粘贴内容。因此该输入中已经包含换行符 (\n) 字符。是的。我想将其转换为 html 换行标记
。再次感谢。它解决了。有人在代码中解决了。
=nl2br($content)?> 是最简单的。

标签： javascript jquery html

【解决方案1】：

您可以将String.protototype.split() 与RegExp /\n|\s\n/ 一起使用，Array.prototype.join() 与参数" \n" 一起使用，将" " 连接到替换结束textarea value

function addBreak(el) {
  var textarea = el;
  var matches = textarea.value.split(/\n|\s\n/);
  textarea.value = matches.join("<br>\n") + "<br>";
}

<div class="comment">
  <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
  <button type="button" onclick="addBreak(this.previousElementSibling)">Generate</button>
</div>

【讨论】：

哇！感谢您的解决方案。这是非同寻常的。效果很好。再次感谢。

【解决方案2】：

在粘贴事件上使用。

$("button").on("click",function(){
  $("#text").bind("paste", function(e){
    $('#txtarea').append('<BR>').focus();
  });
});

<div class="comment">
    <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
    <button type="button">Generate</button>
</div>

【讨论】：

【解决方案3】：

将换行符替换为 

var pastedText = $("#text").val();
pastedText = pastedText.replace(/(\r\n|\n|\r)/gm, "<br>");

【讨论】：

【解决方案4】：

我会通过处理\r\n（序列），然后通过字符类处理\r和\n来覆盖我的赌注，如下所示：

text = text.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');

第一次替换将序列\r\n 变成 。第二个替换用字符串替换任何自己找到的\r 或\n 字符。

更多关于 JavaScript 中的正则表达式here。

【讨论】：