如何从div中获取文本？

Question

我有一个漂亮的样式框用于编辑一些原始文本：

该框为<div>，contenteditable="true"。我不想使用textarea，因为它对风格来说太可怕了。此外，<div>具有很好的属性，它会自动缩放以包含用户输入的文本。

我对div的问题是我似乎无法从中获取原始文本。当用户编辑时，浏览器会插入<div>和<br>来创建换行符，所以当我使用innerHTML获取文本时，我实际上得到的是一堆HTML而不是原始文本。如果我改为使用innerText，它不会保留任何换行符，我会得到这个输出：

"Foo bar:        PowThis field is:  AlignedWith:           This fieldThree empty lines"

是否有浏览器提供的非黑客，非解决方案解决方案，以便在显示时显示文本？

一个有趣的观察是我可以选择文本并将其复制到文本编辑器中：

Answer 1

此解释：http://clubajax.org/plain-text-vs-innertext-vs-textcontent/ 明文，innerText和textContent函数解释说，根据浏览器的不同，文本会有所不同。

所以我担心简单的答案是：否。这取决于您使用什么浏览器来获取缩进等。

Answer 2

http://jsfiddle.net/4roq1838/1/

<pre>标记完全保存所有格式化

UPD ：Firefox不支持innerText

有一个polyfill： https://github.com/duckinator/innerText-polyfill

演示： http://jsfiddle.net/4roq1838/2/