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

也许不是一个简单的方法。由于您要删除除imgs和文本节点之外的所有节点，因此您必须循环子节点。这里有一个原生的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>

Answer 2

基于Joschi的回答，我概括了函数，以便它可以接受用户需要保持原样的元素的选择器：

function stringifyNodeExcept(node, exceptSelector) {
    const matchesSelector = node.matches || node.webkitMatchesSelector || node.mozMatchesSelector || node.msMatchesSelector;

    if (node.nodeType === node.TEXT_NODE) {
        return node.data;
    } else if (matchesSelector.call(node, exceptSelector)) {
        return node.outerHTML;
    } else {
        var ret = "";
        if (!node.childNodes) {
            return ret;
        }
        node.childNodes.forEach(function (subnode) {
            ret += stringifyNodeExcept(subnode, exceptSelector);
        });
        return ret;
    }
}

与innerText类似的行为，但保留<img/>标记

2 个答案: