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

标签 javascript jquery html

我有一个 <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>

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

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

当点击按钮时,它看起来像这样。

Lorem ipsum dolor sit amet, <br />
consectetuer adipiscing elit, <br />
sed diam nonummy nibh euismod tincidunt<br />
ut laoreet dolore magna aliquam<br />
erat volutpat.<br />

伙计们帮帮我。

最佳答案

你可以使用 String.protototype.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>

关于javascript - 在 jQuery/JavaScript 中的每一行末尾添加 <br/> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36123696/

相关文章:

javascript - AJAX 调用工作正常但加载 gif 消失得太快

javascript - 更新图表中的数据(下拉)

javascript - html输入数字,min + step,使step忽略min?

javascript - jQuery Unobtrusive验证的验证摘要未显示

javascript - PHP 消息未写入日志文件 - tutsplus.com 教程

Javascript 内容到 HTML 内容转换器

javascript - HTML - 从 mysql 生成的选择框内的选项更改文本区域中的颜色

javascript - 如何将base64 svg字符串设置为图像标签src?

javascript - Python 返回 jsonp 以进行自动完成

javascript - 在 Android 5 及更高版本上使用 JQuery 单击或触摸 End 或按下鼠标