5

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

初始点：

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

最终目标：

This is

some



content

解释：

更具体地说，我在处理 div 中的内容时遇到问题，然后在编辑时变成 textarea，然后在完成编辑时又回到 div。数据库必须在保存时存储 <br> 标签...似乎 textareas 使用换行符 (\n) 并返回 (\r)，因此这些 (<br>、\n 和 \r) 之间的转换正在成为对我来说有点问题。

有没有合适的方法在多个浏览器之间处理这个问题？也许一直使用 textarea 会更容易（忘记 div）？当我尝试在 div 和 textarea 之间移动内容，然后再回到 div 时，间距开始出现奇怪的事情。

更多细节编辑：

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

编辑：

很好的反馈，谢谢大家！我不希望使用 whtiespace css，因为这需要在已经开发的网站上工作，并且需要对所有包含每个页面内容的 div 进行编辑。< br > 的必须保存在数据库中。

4

4 回答 4

6

这有帮助吗？

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

function replaceHTMLWithLineBreaks(string) {
 return string !== undefined ? string.replace(/<br\/>/gi, '\n') : "";
}
于 2013-08-09T14:28:35.733 回答
1

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);
});

演示

于 2013-08-09T14:34:04.980 回答
0

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

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

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

于 2013-08-09T14:35:15.077 回答
0

parseHTML鉴于您正在使用 jQuery ，请用于此工作。

var html = $.parseHTML('This is<br><br> some<br> <br> <br> <br> content');
html.appendTo(body);
于 2013-08-09T14:36:58.227 回答