我想用它们的文本替换 contenteditable
中的非 img
元素。但是,我想保留任何 img
元素,包括那些嵌套在其他元素中的元素。换句话说:
给定输入,例如:
<div><span>Foo <strong>Bar <img src="blah.png"></strong> and more text <img src="another.png"></span> With some other text <img src="yetmore.png"></div>
我想生产:
Foo Bar <img src="blah.png"> and more text <img src="another.png"> With some other text <img src="yetmore.png">
因为这是一个contenteditable
,我不想使用innerHTML
读/写,因为那样会丢失光标位置等(恢复它很难,因为你最终会得到一个不同的 DOM 树,所以你的选择节点会丢失)。
我最好的选择是遍历树并手动拆分和连接文本节点等等吗?我希望有更好的方法,或者已经可以做这样的事情的图书馆......
最佳答案
制作根元素的浅表克隆。沿着原始元素树走下去,收集文本。当您遇到 img 元素时,添加到目前为止收集的文本作为克隆的子节点的文本节点。附加 img。重新开始收集文本。
继续前进直到到达最后,然后用克隆替换文档中的原始根元素。
编辑
类似于:
function toArray(o) {
var a = [], i = o.length;
while (i--) {
a[i] = o[i];
}
return a;
}
function cleanUp(el) {
var e = el.cloneNode(false);
function addText(text) {
if (text != '') {
e.appendChild(document.createTextNode(text));
}
}
function collectText(el) {
var node, nodes = toArray(el.childNodes);
var text = '';
for (var i=0, iLen=nodes.length; i<iLen; i++) {
node = nodes[i];
if (node.tagName && node.tagName.toLowerCase() == 'img') {
addText(text);
e.appendChild(node);
text = '';
} else if (node.nodeType == 3) {
text += node.data;
} else if (node.nodeType == 1) {
addText(text);
text = '';
collectText(node);
}
}
if (text != '') {
e.appendChild(document.createTextNode(text));
}
}
collectText(el);
el.parentNode.replaceChild(e, el);
}
关于javascript - 用 JS/jQuery 中的文本替换 DOM 树中的非图像元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7144940/