javascript - 使用 JavaScript 获取窗口中当前查看的文本？

Question

我对 JavaScript 函数有一个随机的想法，它返回用户当前正在观察/渲染/基本阅读的文本。我认为这是不可能的(或者非常困难)，因为正在读取的内容通常包含在超出窗口延伸到文档中的分区中。

我认为可以获取当前的滚动位置，然后向下移动窗口高度以抓取该区域中的所有 div。但是，如果它只是选择查看的所有内容 - 这将包括不正确的内容。

function reading() {
  let locationOfWindow = $(window).offset();
  // use to gather text data
}

编辑用一个跨度来包装每个单词以容纳希望查看的重要位的想法，然后循环遍历这些分类跨度中的每一个以检查它是否在屏幕上创建然后将缓存重新组合在一起，但似乎效率低下，而且只有在不存在其他想法的情况下。

注意我的意思并不是“获取每个可以查看的元素”，而是“获取当时窗口中可以查看的所有文本” -如果您在屏幕上的一个大段落中滚动一半，则您会丢失窗口中一半的实际内容。

Answer 1

根据我的评论。有一个简单的plugin by Ben Pickles这会告诉您该元素是否在视口(viewport)中。从这里开始，只需从元素中获取文本就很简单了。

这是一个可以帮助您入门的概念验证。滚动视口(viewport)。 View 中元素的文本将记录到控制台。

$(function() {
  $(window).on("scroll", function() {
      console.clear();
    $("*:visible:onScreen").each(function() {
      console.log($(this).prop('nodeName'),$(this).text());
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // onScreen jQuery plugin v0.2.1
  // (c) 2011-2013 Ben Pickles
  //
  // http://benpickles.github.io/onScreen
  //
  // Released under MIT license.
  (function(a) {
    a.expr[":"].onScreen = function(b) {
      var c = a(window),
        d = c.scrollTop(),
        e = c.height(),
        f = d + e,
        g = a(b),
        h = g.offset().top,
        i = g.height(),
        j = h + i;
      return h >= d && h < f || j > d && j <= f || i > e && h <= d && j >= f
    }
  })(jQuery);
</script>


<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies mi quis hendrerit dolor magna eget est lorem. Sit amet risus nullam eget. Eget magna fermentum iaculis eu non diam phasellus
  vestibulum. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Nunc congue nisi vitae suscipit tellus mauris a. Lobortis scelerisque fermentum dui faucibus. A diam maecenas sed enim ut sem viverra aliquet eget. Purus non enim praesent
  elementum facilisis. Scelerisque in dictum non consectetur a erat nam. Integer vitae justo eget magna fermentum iaculis eu. Neque vitae tempus quam pellentesque nec. Dignissim convallis aenean et tortor at risus viverra.
</p>
<div>
  Amet dictum sit amet justo donec enim. Adipiscing diam donec adipiscing tristique risus nec feugiat in. In ante metus dictum at tempor. Est velit egestas dui id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada. Ligula ullamcorper
  malesuada proin libero nunc consequat interdum varius sit. Arcu cursus vitae congue mauris rhoncus aenean. Gravida cum sociis natoque penatibus et magnis. Senectus et netus et malesuada fames ac. Volutpat lacus laoreet non curabitur gravida arcu. Donec
  et odio pellentesque diam volutpat commodo sed egestas. Odio euismod lacinia at quis risus sed vulputate. Tortor at risus viverra adipiscing at in tellus integer feugiat. Ac turpis egestas maecenas pharetra convallis posuere morbi. Cras fermentum odio
  eu feugiat pretium nibh. Non enim praesent elementum facilisis leo.
</div>
<section>
  Ornare aenean euismod elementum nisi. Non enim praesent elementum facilisis leo vel fringilla est. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Dictum non consectetur
  a erat nam at. A lacus vestibulum sed arcu non odio. Eu consequat ac felis donec et. Dictum sit amet justo donec enim. Ipsum dolor sit amet consectetur. Purus in mollis nunc sed id semper risus. Maecenas pharetra convallis posuere morbi leo urna. Congue
  eu consequat ac felis donec et odio pellentesque diam. Laoreet id donec ultrices tincidunt arcu. Egestas maecenas pharetra convallis posuere. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Cras ornare arcu dui vivamus arcu
  felis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel.
</section>
<blockquote>
  Viverra ipsum nunc aliquet bibendum enim. Habitant morbi tristique senectus et. Suspendisse interdum consectetur libero id. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Neque laoreet suspendisse interdum consectetur libero.
  In hendrerit gravida rutrum quisque non tellus orci. Hendrerit dolor magna eget est lorem. Interdum posuere lorem ipsum dolor sit amet consectetur. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Luctus accumsan tortor posuere ac ut
  consequat semper viverra. Sociis natoque penatibus et magnis dis parturient. Augue interdum velit euismod in pellentesque massa placerat. Purus in massa tempor nec feugiat nisl pretium fusce id. Odio aenean sed adipiscing diam donec adipiscing tristique.
  Nunc sed velit dignissim sodales ut eu sem integer. Suspendisse ultrices gravida dictum fusce. Elementum facilisis leo vel fringilla est ullamcorper. Nam at lectus urna duis convallis convallis tellus id interdum.
</blockquote>
<pre>
Consectetur adipiscing elit pellentesque habitant morbi. Enim sed faucibus turpis in. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. In hac habitasse platea dictumst. Tortor posuere ac ut consequat semper viverra. Sit amet venenatis urna cursus eget. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Consequat id porta nibh venenatis cras sed felis eget velit. At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Neque viverra justo nec ultrices. Nunc aliquet bibendum enim facilisis gravida. Amet consectetur adipiscing elit ut aliquam purus sit. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Mi quis hendrerit dolor magna eget est lorem ipsum. Vitae nunc sed velit dignissim sodales. Vitae aliquet nec ullamcorper sit.</pre>