将内容可编辑文本的innerHTML转换为普通字符串

Convert innerHTML of a contenteditable text to normal string

本文关键字：转换 字符串 innerHTML 编辑 文本      更新时间：2023-09-26

我使用一个内容可编辑元素：

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

和

document.getElementById('myinput').innerHTML

从Javascript中读取其内容。

但结果是：

  • CCD_ 1＝>innerHTML = "blah &nbsp "

  • CCD_ 3＝>innerHTML = "bonjour<br>bonsoir"（Firefox）和innerHTML = "bonjour<div>bonsoir</div>"（Chrome）

  • 也许还有很多其他的东西被翻译成HTML。。。

如何将innerHTML转换为普通文本

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

尝试使用；

// 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 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>和其他块级标记，您需要添加自己的代码。

这是我的答案——它并不完美，有时换行符会被丢弃，但我发现关于这方面的信息太少了，也许它会对某人有所帮助。

  const parseNode = node => {
    let content = ""
    for (const child of node.childNodes) {
      if (child.tagName === "BR") {
        content += "'n"
      }
      if (child.tagName === "DIV" && !child.querySelector("br")) {
        content += "'n"
      }
      if (child instanceof Text) {
        content += child.textContent
      } else {
        content += parseNode(child)
      }
    }
    return content
  }
相关文章：