将可疑文本的innerHTML转换为普通字符串

时间:2014-09-17 13:38:25

标签: javascript html css html5 contenteditable

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

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

document.getElementById('myinput').innerHTML

从Javascript中读取其内容。

但结果是:

  • "blah " =&gt; innerHTML = "blah &nbsp "

  • "bonjour\n bonsoir" =&gt; innerHTML = "bonjour<br>bonsoir"(Firefox)和innerHTML = "bonjour<div>bonsoir</div>"(Chrome)

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

如何将innerHTML转换为普通文字?

(即在我的2个例子中:"blah ""bonjour\n bonsoir"

2 个答案:

答案 0 :(得分:5)

尝试使用;

#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);

答案 1 :(得分:0)

由于这种行为在不同浏览器中不一致,您必须自己实现:

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