Question

我需要捕获网页上显示的可见文字：

按钮标签
下拉列表值
文本
字段标签，（输入框标签，单选按钮标签）等基本上所有在UI上显示的内容，我想捕获 - 没有HTML标签。

按tagName("body").getText()将捕获单个字段。

我需要整个页面，无论分配的ID /类别如何。

Answer 1

试试这样：

OneSignal.configure({});

Answer 2

您可以使用TreeWalker来仅定位文本节点，并提取其textContent属性。

你必须过滤掉<script>和<style>元素中的节点，因为我猜你不想要这些（否则一个简单的document.body.textContent会这样做。）< / p>

＆＃13;

function getDisplayedText(sourceElement) {
  // we need to filter out textContent of script and style elements
  var filterNodes = function(node) {
    var t = node.parentElement.tagName;
    if (t !== 'SCRIPT' && t !== 'STYLE')
      return NodeFilter.FILTER_ACCEPT;
  };
  filterNodes.acceptNode = filterNodes; // IE doesn't like {acceptNode:...} object
  
  // input value hack
  document.querySelectorAll('input:not([type="file"]):not([type="color"]):not([type="checkbox"])')
  .forEach(function(i){
    i.textContent = ''; // clean up previous calls?
    i.appendChild(document.createTextNode(i.value))
  });
  var treeWalker = document.createTreeWalker(
    sourceElement, // walk from the sourceElement
    NodeFilter.SHOW_TEXT, // walk only through text nodes
    filterNodes,
    false
  );

  var str = ''; // will hold all our text nodes
  while (treeWalker.nextNode())
    str += treeWalker.currentNode.textContent;

  return str;
}
console.log(getDisplayedText(document.body));

＆＃13;

<!-- Dummy content -->
<div id="Content">
  <div id="Panes">
    <div>
      <h2>What is Lorem Ipsum?</h2>
      <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <script>
      var shoulNotBeInTheResult = this;
    </script>
    <div>
      <h2>Why do we use it?</h2>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
        here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
        Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div><br>
    <style>
      .shouldNotBeThereEither {}
    </style>
    <div>
      <h2>Gimme an <input type="text" value="Example"></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt sit amet arcu a mollis. Aliquam nunc nisl, aliquam sed consequat fermentum, pulvinar vitae risus. Nullam aliquam semper sodales. Vivamus dictum nisl risus, sed dignissim mauris
        accumsan et. Integer nec mi ipsum.</p>
      <p> Nullam volutpat tristique sapien, non rutrum dolor porta ut. Nam commodo ultricies magna non auctor. Aenean nec hendrerit libero. Sed scelerisque a dolor sed commodo. Vivamus maximus libero ut elementum viverra. Donec ut massa quam. Nullam vitae
        nisl libero. Nullam turpis odio, convallis lacinia leo quis, viverra lacinia lectus. Mauris id turpis consectetur leo ultrices cursus at sit amet sapien. Vestibulum convallis arcu ipsum, sed vulputate risus condimentum at.</p>
    </div>
  </div>
</div>

＆＃13;

使用JavaScript / Jquery从页面中获取所有可见文本（文本，按钮标签，下拉列表等）到变量中

2 个答案: