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

Question

也许问题的表述不太准确，但以下是我尝试使用jQuery完成的内容： 起始点：

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

最终目标：

This is

some



content

说明：

更具体地说，我在处理一个div中的内容时遇到了问题。在编辑时，它会变成一个textarea，然后在完成编辑后又变回一个div。数据库必须保存<br>标记，因为似乎文本区域使用换行符(\n)和回车符(\r)而不是(<br>、\n和\r)之间的转换对我来说有点麻烦。

在多个浏览器之间是否有适当的处理方式？也许只使用textarea会更容易一些(并忘记divs)？当我尝试在div和textarea之间移动内容，然后再返回到div时，间距开始变得混乱。

更详细的编辑：

如果用户单击编辑并将原始的div转换为textarea，他们开始进行更改，然后点击完成，但决定取消编辑并恢复到旧内容。文本区域会变回一个div，并且之前的内容(存储在隐藏的div中)会替换掉用户输入的内容。因此，这种内容的来回切换。

编辑：

非常感谢您所有的反馈！我不想使用whitespace css，因为这需要在每个页面上的所有包含内容的div上进行编辑，这需要在已经开发的网站上进行修改。<br>必须保存在数据库中。

- Tony M

---

你指出了问题！文本区域使用\r作为换行符。HTML使用<br>。 - TCHdvlp

你可以在 div 上使用 white-space:pre-line;，而不必担心将其存储为 <br/>。;-) - Brad Christie

这是@BradChristie所描述的示例：http://jsfiddle.net/C8Fnz/ - billyonecan

@BradChristie 你应该把那个作为答案发布。 - billyonecan

@billyonecan，“当我尝试在div和textarea之间移动内容，然后再移回div时，这句话让我认为这是一个需求…” - TCHdvlp

Answer 1

这对您有帮助吗？

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

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

- JSager

---

这似乎产生了我想要的效果，但增加了比所需更多的额外空间。由于某种原因，大多数答案都会添加更多的空格。几乎就像是在重复使用空白。 - Tony M

我的解决方案没有添加任何空格，可能是您之前没有考虑到的空格。您可以尝试在字符串上调用.trim()方法以删除开头和结尾的空格。 - JSager

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

演示

- letiagoalves

Answer 3

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

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

看看这个代码片段：http://jsfiddle.net/N7GkH/

- Robin Leboeuf

Answer 4

使用parseHTML来完成这个任务，前提是你正在使用jQuery。

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

- federico-t