javascript - 用 JS/jQuery 中的文本替换 DOM 树中的非图像元素

Question

我想用它们的文本替换 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 树，所以你的选择节点会丢失)。

我最好的选择是遍历树并手动拆分和连接文本节点等等吗？我希望有更好的方法，或者已经可以做这样的事情的图书馆......

Answer 1

制作根元素的浅表克隆。沿着原始元素树走下去，收集文本。当您遇到 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);
}