javascript - 获取 html 元素向用户显示的内容

Question

您可以使用 innerHTML 获取代码存储在 html 元素中的内容。有什么方法可以显示用户在渲染版本中复制并粘贴内容后会得到什么。

例如，如果您有 div

<div>&nbsp;&nbsp;&nbsp;Hello World <img alt="imageText" src="image/source"></img></div>

我想要获取字符串“Hello World imageText”

Answer 1

可以使用递归函数获取所有子节点的文本内容:

function getText(node) {
  switch (node.nodeType){
    case Node.ELEMENT_NODE:
      if (node.tagName === 'IMG') {
        return node.getAttribute('alt');
      } else {
        var children = Array.prototype.slice.call(node.childNodes);
        return children.map(getText).join('');
      }
    case Node.TEXT_NODE:
      return node.textContent;
  }
}

var div = document.querySelector('div');
console.log(getText(div));

<div>&nbsp;&nbsp;&nbsp;Hello World <img alt="imageText" src="image/source"></img></div>