在jQuery/JavaScript中的每一行结尾添加<br />标签

Question

我有一个用户输入文本域<textarea>。我想要实现这个功能- 当用户在该字段中粘贴他们的文本并单击某个按钮时，它将自动在每行末尾添加一个换行符标记<br />
我的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>

当用户将文本粘贴到文本区域字段中时，点击按钮后它会变成这样：

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam
erat volutpat.
帮我解决问题吧。

- Opu Hossain Hawlader

---

当您将输入复制粘贴到文本区域时，是否带有回车符？或者您想要“生成”按钮自动计算行大小并插入换行符吗？ - gurvinder372

任何方法都可以。点击生成对我来说很容易理解。 - Opu Hossain Hawlader

请再读一遍我的问题。下面的大多数答案都假设（基于您模糊的输入），输入已经包含换行符（\n）字符。您的输入是要将单行分成多行，还是已经具有所需的换行符？ - gurvinder372

用户将从网站复制并粘贴内容。因此，输入中已经有换行符（\n）字符。是的，我想将其转换为HTML换行标记<br>。再次感谢。问题已解决。有人在代码片段中解决了它。 - Opu Hossain Hawlader

<?=nl2br($content)?> 是最简单的。 - Gogol

Answer 1

您可以使用String.prototype.split()与RegExp/\n|\s\n/，Array.prototype.join()与参数"<br>\n"，将"<br>"连接到替换的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>

- guest271314

---

哇！感谢您提供的解决方案。这太棒了。运行得非常好。再次感谢。 - Opu Hossain Hawlader

Answer 2

我会通过处理\r\n（序列）来确保程序的稳定性，然后通过字符类来处理\r和\n，代码如下：

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

第一个替换将序列\r\n转换为<br />。第二个替换将任何单独找到的\r或\n字符替换为该字符串。

有关JavaScript中正则表达式的更多信息在此处。

- Harish V

Answer 3

使用粘贴事件。

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

- sathish kumar

Answer 4

将换行字符替换为<br/>

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

- Arumuga Raja