将 contenteditable 文本的 innerHTML 转换为普通字符串答案

【问题标题】：Convert innerHTML of a contenteditable text to normal string将 contenteditable 文本的 innerHTML 转换为普通字符串
【发布时间】：2014-09-17 13:38:25
【问题描述】：

我使用内容可编辑的元素：

<span id="myinput" contenteditable="true">This is editable.</span>

和

document.getElementById('myinput').innerHTML

从 Javascript 中读取其内容。

但结果是：

"blah " => innerHTML = "blah &nbsp "
"bonjour\n bonsoir" => innerHTML = "bonjour<br>bonsoir" (Firefox) 和 innerHTML = "bonjour<div>bonsoir</div>" (Chrome)
也许还有很多其他的东西被翻译成 HTML...

如何将innerHTML转换为普通文本？

（即在我的 2 个示例中："blah " 和 "bonjour\n bonsoir"）

【问题讨论】：

显然您需要将内容处理为文档树的子树，根据一些规则（您需要定义）提取文本内容并插入换行符。细节部分取决于文本的预期用途。
这已部分解决：innerText 适用于除 Firefox 之外的所有浏览器，为此我创建了另一个特定问题：stackoverflow.com/questions/25893229/…

标签： javascript css html contenteditable

【解决方案1】：

尝试使用；

// for IE
document.getElementById('myinput').innerText

// for everyone else
document.getElementById('myinput').textContent

在寻找换行符等方面，考虑；

el = document.getElementById('myinput');
var nodes = el.childNodes;
var text = '';

for(var i = 0; i < nodes.length; i++) {                        
    switch(nodes[i].nodeName) {
        case '#text'    : text = text + nodes[i].nodeValue;   break;
        case 'BR'       : text = text + '\n';      break;
    }
}
console.log(text);

【讨论】：

或者只是var text = el.textContent || el.innerText;
.textContent 不会将<br> 转换为\n
innerText 适用于 IE + Chrome，但不适用于 Firefox。 textContent 不起作用，因为换行符丢失了："bonjour\n bonsoir" => textContent = "bonjourbonsoir"。如何处理这个问题？
更新的答案，我可以立即看到的唯一方法是确定单个节点类型并适当处理。使用一些正则表达式向导可能会做得更好
不适用于 Chrome ;) 因为它不是 BR，而是
新行
.... @EvilEpidemic

【解决方案2】：

由于这种行为在不同的浏览器中并不一致，你必须自己实现：

var convert = (function() {
    var convertElement = function(element) {
        switch(element.tagName) {
            case "BR": 
                return "\n";
            case "P": // fall through to DIV
            case "DIV": 
                return (element.previousSibling ? "\n" : "") 
                    + [].map.call(element.childNodes, convertElement).join("");
            default: 
                return element.textContent;
        }
    };

    return function(element) {
        return [].map.call(element.childNodes, convertElement).join("");
    };
})();

实际操作中：http://jsfiddle.net/koyd8h59/1/

当然，如果您想使用<h1> 和其他块级标签，您需要添加自己的代码。

【讨论】：

感谢您的回答。我遇到过同样的问题。我必须进一步调整它。当用户在 Chrome 中按下Enter 时，引擎会输入<div><br/><div>。所以需要分开处理。请参阅TypeScript Gist here。