jQuery textarea 值不会转换换行符

Posted

技术标签:

【中文标题】jQuery textarea 值不会转换换行符【英文标题】:jQuery textarea value doesn't convert line breaks 【发布时间】:2013-12-26 08:55:38 【问题描述】:

在将 javascript 中设置的字符串添加到 textarea 值时,它似乎可以很好地转换换行符。但是,当从数据属性中获取此字符串时,似乎将换行符保留为 \n

它们都有字符串类型,所以我很困惑一个是如何工作的,而不是另一个。

如何获取数据属性并使换行符与 textarea 一起使用?

<div id="test" data-message="this\ntest"></div>
<textarea id="textarea"></textarea>
<textarea id="textarea2"></textarea>
var html = 'this\ntest';
var div = $('#test').data('message');

$('#textarea').val(html);
$('#textarea2').val(div);

JSFiddle Example

【问题讨论】:

看起来像当来自属性@ 987654325读取的值@ \`,见html和@ 987654327 jsfiddle.net/arunpjohny/7q8RG/1 跨度>之间的长度差异 【参考方案1】:

您需要在 HTML 属性中使用 HTML 字符实体进行换行:&amp;#13;

var html = 'this\ntest';
var div = $('#test').data('message');

$('#textarea').val(html);
$('#textarea2').val(div);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test" data-message="this&#13;test"></div>
<textarea id="textarea"></textarea>
<textarea id="textarea2"></textarea>

【讨论】:

没问题,很乐意提供帮助。【参考方案2】:

当您从数据属性中获取\n 时,它正在转义,因此您需要替换它:

$('#textarea2').val(div.replace("\\n","\n"));

Example

【讨论】:

全局替换:div.replace(/\\n/g,"\n")

以上是关于jQuery textarea 值不会转换换行符的主要内容,如果未能解决你的问题,请参考以下文章

textarea 换行之间的转换

将 textareas 字符串值转换为由换行符分隔的 JavaScript 数组

textarea展示的内容中 换行符/n失效,不知为何

textarea 的 .val() 不考虑换行

Textarea 需要省略号而不是自动换行

textarea placeholder文字换行