Question

也许问题的措辞不正确，但这是我正在尝试用jQuery做的事情：

起点：

This is<br><br> some<br> <br> <br> <br> content

结束目标：

This is

some



content

解释

更具体地说，我在处理div中的内容时遇到问题，然后在编辑时变成textarea，然后在完成编辑时返回div。数据库必须存储＆lt; br＆gt;保存标签...似乎textareas使用换行符（\ n）并返回（\ r）而不是这些（＆lt; br＆gt;，\ n和\ r \ n）之间的转换对我来说变得有点问题。

在多个浏览器之间有没有正确的方法来处理这个问题？或许可能更容易一直使用textarea（而忘记div）？当我尝试在div和textarea之间移动内容然后再回到div时，时空开始就会出现间距。

更多细节编辑：

如果用户单击编辑并将原始div转换为textarea，则他们会开始进行更改并单击“完成”，但决定取消编辑并恢复为旧内容。 textarea转回div，旧内容（存储在隐藏的div中）取代了用户编写的内容。因此来回内容。

修改

很棒的反馈，谢谢大家！我不想使用whtiespace css，因为这需要在已经开发的网站上工作，并且需要在每个页面上保存内容的所有div上进行编辑。＆LT; br＆gt;必须保存在数据库中。

Answer 1

这有帮助吗？

function replaceLineBreaksWithHTML(string) {
 return string !== undefined ? string.replace(/\n/g, '<br/>') : "";
}

function replaceHTMLWithLineBreaks(string) {
 return string !== undefined ? string.replace(/<br\/>/gi, '\n') : "";
}

Answer 2

您可以通过以下方式在textarea和div元素之间传递文字：

（请注意，我使用的是jQuery，但没有必要，它只是一个演示）

$("#b1").click(function(){
    var text = $("textarea").val().replace(/\n/g, "<br>");
    $("div").html(text);
});

$("#b2").click(function(){
    var text = $("div").html().replace(/<br>/gi, "\n");
    $("textarea").val(text);
});

<强> DEMO

Answer 3

您可以使用替换正则表达式将br转换为\ n：）

$('#mytextarea').val($.trim($('#mydiv').html().replace(/<br>/g, '\n')));

看看这个小提琴：http://jsfiddle.net/N7GkH/

Answer 4

使用parseHTML执行此作业，因为您使用的是jQuery。

var html = $.parseHTML('This is<br><br> some<br> <br> <br> <br> content');
html.appendTo(body);

如何使用jQuery将字符串转换为实际的HTML？

4 个答案: