我使用了一个内容可编辑的元素。
<span id="myinput" contenteditable="true">This is editable.</span>
和
document.getElementById('myinput').innerHTML
从Javascript中读取其内容。
但结果是:
"blah "
=> innerHTML = "blah   "
"bonjour\n bonsoir"
=> innerHTML = "bonjour<br>bonsoir"
(Firefox)和 innerHTML = "bonjour<div>bonsoir</div>"
(Chrome浏览器)
也许还有很多其他的东西被翻译成HTML......
如何转换 innerHTML
变成正常文字?
(即在我的2个例子中。"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.netkoyd8h591
当然,如果你想使用你自己的代码,你需要添加你自己的代码 <h1>
和其他块级标签。