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

【问题标题】：how to get properly formatted text value from a div如何从 div 中获取格式正确的文本值
【发布时间】：2015-02-14 10:20:26
【问题描述】：

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

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

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

例如，如果我在我的 div 中输入这个：

"a
 aa

asdf"

我会用 textContent 解决这个问题：

"a aaasdf"

有没有办法从像 textarea 这样的 contenteditable div 中获取格式化文本？

【问题讨论】：

标签： javascript html css

【解决方案1】：

也可以使用.innerHTML 来获取换行符。

阅读：.innerHTML | MDN

工作代码片段：

document.getElementById('copy').addEventListener('click', function(){
  var text = document.getElementById('input').innerHTML;
  document.getElementById('output').innerHTML = text;
});

div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}

<div contenteditable='true' id="input">Enter something funny<br>;)</div>

<button id="copy">Copy Text</button>

<div id="output">Text will be copied here.</div>

【讨论】：

.innerHTML 返回所有带有
的内部 html，所以没有...而是需要使用 .innerText
@Alexander 感谢您的指出！我已经更新了我的答案。 :)
是的，这在 chrome 中效果很好，但 innerText 在 Firefox 中不起作用。你知道跨浏览器解决方案吗？
@Derek 使用 .innerHTML 本身。也适用于 Firefox、Chrome 和 IE。答案已更新。
@Alexander 我认为innerHTML 获取<br> 不会有问题。 OP 想要 formatted 文本。

【解决方案2】：

示例来自：Extracting text from a contentEditable div

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

不过，这需要 jQuery。

【讨论】：

【解决方案3】：

当您在contenteditable 元素中输入内容时，它会在目标元素中自动生成 HTML 节点。~~因此您需要访问其 .innerHTML 属性并将内容视为 HTML，而不是纯文本 s>~~

您可以使用.innerHTML 属性访问此HTML 内容，也可以使用.innerText，它返回纯文本但保留@Rahul Desai 的答案和this blog post 中所示的格式：

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

如果我进入

你好
如何

你在吗

进入那个div然后点击按钮，控制台显示：

<p>Hello</p><p>how</p><p><br></p><p>are you</p>

【讨论】：

【解决方案4】：

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

【讨论】：