jQuery弄乱了换行符答案

【问题标题】：jQuery messes up line breaksjQuery弄乱了换行符
【发布时间】：2018-07-29 22:03:22
【问题描述】：

我有一个 if else 语句。在 标记中的文本和可编辑<textarea> 中的相同文本之间切换

问题是：

您按下编辑按钮，脚本会将 p 标签转换为 textarea。带有换行符的文本可以很好地转换。
您按保存。文本再次正确转换回 p 标签。

您尝试再次按编辑...但这一次，换行符被忽略了！？

var curState = "Ret";

if (curState == "Gem"){
        curState = "Ret";

        var p = btn.closest("div").find("textarea");

        var t = jQuery(this).closest("div").children("div").children('textarea').data();

        var ta = jQuery("<p/>", {
        "data": t
        });
        p.replaceWith(ta); 
}else{
        curState = "Gem";

        var p = jQuery(this).closest("div").find("p");

        var t = p.data()

        var ta = jQuery("<textarea/>", {
        "class": "editTextarea",
        "data": t
        });
        p.replaceWith(ta);
}

【问题讨论】：

不要在 textarea 上使用 html 方法......用 val() 设置它的值。除此之外，您似乎正在替换所有换行符，因此预计第二次会有所不同。请提供 可运行 minimal reproducible example。在问题编辑器中单击<> 以创建将在此页面中运行的sn-p
提示：尝试将包含\n 的原始文本存储在 的data() 中，而不是依赖它的textContent
@charlietfl 对不起。现在编辑了。正如您在更新的问题中看到的那样，我尝试使用 .data() 。但没有任何区别
请使此代码可运行，以便我们自己查看问题。只需要足够的基本 html 并通过在问题编辑器中单击 <> 在 stack sn-p 中包含 jQuery 库
data() 的使用也不正确。 set 需要一个键和值，get 需要相同的键。 api.jquery.com/data

标签： jquery replace textarea

【解决方案1】：

一种方法是从  获取 html 并将其插入另一个容器，然后在   上使用 replaceWith() 并将修改后的 html 拉出用作 textarea 的值

简单的工作演示：

// create temporary element to insert the `<p>` html into
var $content = $('<div>').append($('p').html())
 // replace <br> tags
 $content.find('br').replaceWith('\n')
// set value using modified html
$('textarea').val( $content.html() )

p{border:2px solid #ccc; padding: 1em}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Line 1<br/><br><br/>Line 2
</p>
<textarea rows="10"></textarea>

【讨论】：

太棒了！！非常感谢！
唯一的问题是它像 ekstra 换行符一样插入？

【解决方案2】：

您必须使用html() 而不是data() 来检索p 元素的内容。

获得内容后，将  替换为\n：

var t = p.html()

var ta = jQuery("<textarea/>", {
    "class": "editTextarea"
});

ta.val(t.replace('<br>', '\n');

【讨论】：

ta.val(t.text()) 应该做同样的事情并且不会遇到自动关闭  的问题。此外，没有 g 标志的 replace() 仅替换第一个实例
text 的问题是没有考虑双换行符。