javascript - jquery 获取当前显示的文本(即不仅仅是可见的)

Question

是否可以在 Jquery/jscript 中获取当前显示在屏幕上的文本，即。不要获取具有显示可见或类似类型属性但当前未显示在屏幕上的文本(即用户必须使用滚动条才能查看该文本)

Answer 1

问题是文本节点 (nodeType 3) 在屏幕上没有映射空间，因此我们需要用元素包裹所有单词 (nodeType 1)这样我们就可以找到position()。

示例 HTML 文本:

<div>

    "Call me Ishmael," Moby-Dick begins, in one of the most recognizable opening lines in English-language literature. The narrator, an observant young man setting out from Manhattan, has experience in the merchant marine but has recently decided his next voyage will be on a whaling ship. On a cold, gloomy night in December, he arrives at the Spouter-Inn in New Bedford, Massachusetts, and agrees to share a bed with a then-absent stranger. When his bunk mate, a heavily tattooed Polynesian harpooner named Queequeg, returns very late and discovers Ishmael beneath his covers, both men are alarmed, but the two quickly become close friends and decide to sail together from Nantucket, Massachusetts on a whaling voyage.
In Nantucket, the pair signs on with the Pequod, a whaling ship that is soon to leave port. The ship’s captain, Ahab, is nowhere to be seen; nevertheless, they are told of him — a "grand, ungodly, godlike man,"[26] who has "been in colleges as well as 'mong the cannibals," according to one of the owners. The two friends encounter a mysterious man named Elijah on the dock after they sign their papers and he hints at troubles to come with Ahab. The mystery grows on Christmas morning when Ishmael spots dark figures in the mist, apparently boarding the Pequod shortly before it sets sail that day.
The ship’s officers direct the early voyage while Ahab stays in his cabin. The chief mate is Starbuck, a serious, sincere Quaker and fine leader; second mate is Stubb, happy-go-lucky and cheerful and always smoking his pipe; the third mate is Flask, short and stout but thoroughly reliable. Each mate is responsible for a whaling boat, and each whaling boat of the Pequod has its own pagan harpooneer assigned to it. Some time after sailing, Ahab finally appears on the quarter-deck one morning, an imposing, frightening figure whose haunted visage sends shivers over the narrator.
“    He looked like a man cut away from the stake, when the fire has overrunningly wasted all the limbs without consuming them, or taking away one particle from their compacted aged robustness... Threading its way out from among his grey hairs, and continuing right down one side of his tawny scorched face and neck, till it disappeared in his clothing, you saw a slender rod-like mark, lividly whitish. It resembled that perpendicular seam sometimes made in the straight, lofty trunk of a great tree, when the upper lightning tearingly darts down it, and without wrenching a single twig, peels and grooves out the bark from top to bottom ere running off into the soil, leaving the tree still greenly alive, but branded.    ”
One of his legs is missing from the knee down and has been replaced by a prosthesis fashioned from a sperm whale's jawbone.
Soon gathering the crewmen together, with a rousing speech Ahab secures their support for his single, secret purpose for this voyage: hunting down and killing Moby Dick, an old, very large sperm whale, with a snow-white hump and mottled skin, that crippled Ahab on his last whaling voyage. Only Starbuck shows any sign of resistance to the charismatic but monomaniacal captain. The first mate argues repeatedly that the ship’s purpose should be to hunt whales for their oil, with luck returning home profitably, safely, and quickly, but not to seek out and kill Moby Dick in particular — and especially not for revenge. Eventually even Starbuck acquiesces to Ahab's will, though harboring misgivings.
The mystery of the dark figures seen before the Pequod set sail is explained during the voyage's first lowering for whales. Ahab has secretly brought along his own boat crew, including a mysterious harpooneer named Fedallah (also referred to as 'the Parsee'), an inscrutable figure with a sinister influence over Ahab. Later, while watching one night over a captured whale carcass, Fedallah gives dark prophecies to Ahab regarding their twin deaths.


Moby Dick
The novel describes numerous "gams," social meetings of two ships on the open sea. Crews normally visit each other during a gam, captains on one vessel and chief mates on the other. Mail may be exchanged and the men talk of whale sightings or other news. For Ahab, however, there is but one relevant question to ask of another ship: “Hast seen the White Whale?” After meeting several other whaling ships, which have their own peculiar stories, the Pequod enters the Pacific Ocean. Queequeg becomes deathly ill and requests that a coffin be built for him by the ship’s carpenter. Just as everyone has given up hope, Queequeg changes his mind, deciding to live after all, and recovers quickly. His coffin becomes his sea chest, and is later caulked and pitched to replace the Pequod's life buoy.
Soon word is heard from other whalers of Moby Dick. The jolly Captain Boomer of the Samuel Enderby has lost an arm to the whale, and is stunned at Ahab's burning need for revenge. Next they meet the Rachel, which has seen Moby Dick very recently. As a result of the encounter, one of its boats is missing; the captain’s youngest son had been aboard. The Rachel's captain begs Ahab to aid in the search for the missing boat, but Ahab is resolute; the Pequod is very near the White Whale now and will not stop to help. Finally the Delight is met, even as its captain buries a sailor who had been killed by Moby Dick. Starbuck begs Ahab one final time to reconsider his thirst for vengeance, but to no avail.
The next day, the Pequod meets Moby Dick. For two days, the Pequod's crew pursues the whale, which wreaks widespread destruction, including the disappearance of Fedallah. On the third day, Moby Dick rises up to reveal Fedallah tied to him by harpoon ropes, clearly dead. Even after the initial battle on the third day, as Moby Dick swims away from the Pequod, Starbuck exhorts Ahab one last time to desist, observing that "Moby-Dick seeks thee not. It is thou, thou, that madly seekest him!"
Ahab ignores this voice of reason and continues with his ill-fated chase. As the three boats sail out to hunt him, Moby Dick damages two of them, forcing them to go back to the ship and leaving only Ahab's vessel intact. Ahab harpoons the whale, but the harpoon-line breaks. Moby Dick then rams the Pequod itself, which begins to sink. As Ahab harpoons the whale again, the unfolding harpoon-line catches him around his neck and he is dragged into the depths of the sea by the diving Moby Dick. The boat is caught up in the whirlpool of the sinking ship, which takes almost all the crew to their deaths. Only Ishmael survives, clinging to Queequeg’s coffin-turned-life buoy for an entire day and night before the Rachel rescues him.

</div>

JQuery 操作:

$(function(){
    var tmp_id          = 1,
        screen_bottom   = $(window).height(),
        on_screen_words = [];

    $('body div').contents().each(function() {
        if (this.nodeType == 3) {
            var _this = $(this),
                _swap = $('<div id="textnodewrapper' + tmp_id + '" />');

            $.each(_this.text().split(' '),function(i,val) {
                _swap.append('<span class="textnode">' + val + '</span>');
            });
            _swap.insertBefore(_this);
            _this.remove();
        }
        tmp_id++;
    });

    $('.textnode').each(function() {
        if(($(this).position().top + $(this).height()) < screen_bottom) {
            on_screen_words.push($(this).text());
        }
    });

    alert(on_screen_words.join(' '));
});

这不是一个完整的解决方案，但它应该可以帮助您朝着正确的方向开始。

演示:http://jsfiddle.net/AlienWebguy/LnYff/