获取 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>   Hello World <img alt="imageText" src="image/source"></img></div>