Javascript 如何从div中获取格式正确的文本值

我正在尝试从contenteditable='true'div获取格式化文本以发送到我的服务器

我曾经使用textarea，当您获得textarea的值时，它会保留空白和换行符，但当使用contenteditable div时，即使使用以下样式，我也无法获得格式正确的文本：

white-space: pre-wrap;
word-wrap: break-word;

例如，如果我在div中键入：

"a
 aa

asdf"

我将通过文本内容将其发布：

"a aaasdf"

---

是否有任何方法可以从contenteditable div（如textarea）中获取格式化文本？

使用

.innerHTML

也可以获取换行符

阅读：

工作代码片段：

document.getElementById（'copy'）.addEventListener（'click'，function（）{
var text=document.getElementById（'input'）.innerHTML；
document.getElementById（'output'）.innerHTML=text；
});
div{
宽度：200px；
高度：200px；
边框：1px纯黑；
显示：内联块；
垂直对齐：顶部；
}
输入有趣的内容
；）
复制文本
文本将复制到此处。
示例来自：

函数getContentEditableText（id）{
var ce=$（“”）.html（$（“#”+id.html（））；
如果（$.browser.webkit）
（函数（）{return“\n”+this.innerHTML；}）；
如果（$.browser.msie）
ce.find（“p”）.replaceWith（函数（）{返回this.innerHTML+“
”；}）；
if（$.browser.mozilla | |$.browser.opera |$.browser.msie）
ce.find（“br”）。替换为（“\n”）；
返回ce.text（）；
}

或：

$.fn.getPreText=函数（）{
var ce=$（“”）.html（this.html（））；
如果（$.browser.webkit）
（函数（）{return“\n”+this.innerHTML；}）；
如果（$.browser.msie）
ce.find（“p”）.replaceWith（函数（）{返回this.innerHTML+“
”；}）；
if（$.browser.mozilla | |$.browser.opera |$.browser.msie）
ce.find（“br”）。替换为（“\n”）；
返回ce.text（）；
};

---

但是，这需要jQuery。

当您将内容输入到

contenteditable

元素中时，这会自动在目标元素中生成HTML节点。因此，您需要访问其

.innerHTML

属性，并将内容视为HTML，而不是纯文本

您可以使用

.innerHTML

属性访问此HTML内容，也可以使用

.innerText

，它返回纯文本，但保留格式，如@Rahul Desai的答案和中所示：

document.getElementById（'getText'）.onclick=function（）{
log（document.getElementById（'edit'）.innerHTML）；
};
在此处键入

document.getElementById（'getText'）.onclick=function（）{
log（document.getElementById（'edit'）.innerHTML）；
};
在此处键入
.innerHTML返回所有带有
的内部html，因此没有。。。相反，我们需要使用。innerText@Alexander谢谢你的指点！我已经更新了我的答案。：）是的，这在chrome中非常有效，但innerText在firefox中不起作用。你知道跨浏览器解决方案吗？@Derek使用
.innerHTML
本身。也适用于Firefox、Chrome和IE。答案已更新。@Alexander我认为
innerHTML
获取

不会有问题。OP需要格式化的
文本。
function getContentEditableText(id) {
    var ce = $("<pre />").html($("#" + id).html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
}

$.fn.getPreText = function () {
    var ce = $("<pre />").html(this.html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
};