Получить текущий просматриваемый текст в окне, используя JavaScript?

Question

У меня была эта случайная идея для функции JavaScript, которая возвращает текст, который пользователь в настоящее время наблюдает / отображает / читает. Я думал, что это будет невозможно (или очень сложно) из-за содержимого, которое читается, часто содержится в разделах, которые выходят за пределы окна в документ.

Я думал, что возможно получить текущую позицию прокрутки, затем двигайтесь вниз по высоте окна, чтобы взять все элементы div в этой области. Но, если бы он просто выбирал все просмотренные - это включало бы контент вне перспективы.

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

Редактировать идея обернуть каждое отдельное слово в интервал для важных битов, которые хотелось бы видетьпросмотр, а затем циклический просмотр каждого из этих классифицированных диапазонов, чтобы проверить, не на экране ли он, чтобы создать кэш, а затем собрать заново, но кажется неэффективным и только если других идей не существует.

Примечание Я не имею в виду «получить каждый элемент, который можно просмотреть», а вместо этого «получить каждый бит текста, который можно просмотреть» в окне за раз - если вы прокручиваетесь на полпутичерез большой абзац на экране вы пропускаете половину реального содержимого в окне.

Answer 1

Согласно моему комментарию. Есть простой плагин от Ben Pickles , который сообщит вам, находится ли элемент в окне просмотра. Оттуда просто получить текст из элемента.

Вот подтверждение концепции, с которой можно начать. Прокрутите окно просмотра. Текст элементов просмотра будет записан на консоль.

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

  // 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);




  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.


  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.


  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.


  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.


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.