javascript - 与innerText类似的行为，但保留 <img> 标签

Question

我想获取元素的内部文本，但理想情况下保持它们包含的任何图像标签完好无损。 所以如下:

<span>some<img src="first"><b>awesome</b><span>text<img src="second"></span></span>

应该转换为类似的内容:

some<img src="first">awesometext<img src="second">

有什么简单的方法可以实现这一点吗？

Answer 1

也许不是一个简单的方法。当您想要删除除图像和文本节点之外的所有节点时，您将必须循环子节点。这里是一个本地 js 代码示例:

function cleaned(node) {
  if (node.nodeType === node.TEXT_NODE) {
    return node.data;
  } else if (node.tagName === "IMG") {
    return node.outerHTML;
  } else {
    var ret = "";
    if (!node.childNodes) {
      return ret;
    }
    node.childNodes.forEach(function(subnode) {
      ret += cleaned(subnode);
    });
    return ret;
  }
}

var str = cleaned(document.getElementById("src"));

console.info(str);

<div id="src">
  <span>some<img src="first"><b>awesome</b><span>text<img src="second"></span></span>
</div>