jQuery 滚动到文本或滚动到字符串

Question

我有这样的字符串:

Life is a characteristic distinguishing physical entities having signaling and self-sustaining processes from those that do not,[1][2] either because such functions have ceased (death), or because they lack such functions and are classified as inanimate.[3][4][5] Biology is a science concerned with the study of life.

The smallest contiguous unit of life is called an organism. Organisms are composed of one, or more, cells, undergo metabolism, maintain homeostasis, can grow, respond XXXXXX to stimuli, reproduce and, through evolution, adapt to their environment in successive generations.[1] A diverse array of living organisms can be found in the biosphere of Earth, and the properties common to these organisms—plants, animals, fungi, protists, archaea, and bacteria—are a carbon- and water-based cellular form with complex organization and heritable genetic information.

The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have XXXXXXXXX started even earlier,[12] as early as 4.25 billion years ago according to one study,[13] and even earlier yet, 4.4 billion years ago, according to another study.[14] The mechanism by which life began on Earth is unknown, although many hypotheses have been formulated. Since emerging, life has evolved into a variety of forms, which biologists have classified into a hierarchy of taxa. Life can survive and thrive in a wide range of conditions.

Though life is confirmed only on the Earth, many think that extraterrestrial life is not only plausible, but probable or inevitable.[15][16] Other planets and moons in the Solar System have been examined for evidence of having once supported simple life, and projects such as SETI have attempted to detect radio transmissions from possible alien civilizations. According to the panspermia hypothesis, XXXXXXXXXXmicroscopic life exists throughout the Universe, and is distributed by meteoroids, asteroids and planetoids.[17]

The meaning of life—its significance, origin, purpose, and ultimate fate—is a central concept and question in philosophy and religion. Both philosophy and religion have offered interpretations as to how life relates to existence and consciousness, and on related issues such as life stance, purpose, conception of a god or gods, a soul or an afterlife. Different XXXXXXXXXXXXXcultures throughout history have had widely varying approaches to these issues.

我有以下元素:

<input type="button" value="Prev" id="P" name="P">
<input type="button" value="Next" id="N" name="N">

和一个文本区域

<textarea id="enterAnyText"></textarea>

当用户单击该输入时#P ，页面应该 scroll到上一个XXXXXXXXX或他们(用户)在 textarea 中插入的任何文本，有一个漂亮的动画。

当用户单击该输入时#N ，页面应该 scroll到下一个XXXXXXXXX或他们(用户)在 textarea 中插入的任何文本，有一个漂亮的动画。

animation不应该太快并且应该流畅。

我正在运行最新的jQuery版本且没有数据库。

文本是从不同的故事书中随机生成的...所以 XXXXXXX 可能表示任何 word , string或text他们想要在故事书中随机生成的长文本中进行搜索。

请注意:故事书保存在.html中文件即 story1.html , story2.html. ...它们被加载到divs里面使用jQuery.load()

编辑2:我们尝试使用即 jQuery("p:contains(txt)")但这会滚动到父项 p标记不是文本或单词本身

像这样的段落:

The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have a paragraph like: The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have a paragraph like: The Earth was formed about 4.54 billion years ago. The earliest life on Earth existed at least 3.5 billion years ago,[6][7][8] during the Eoarchean Era when sufficient crust had solidified following the molten Hadean Eon. The earliest physical evidence for life on Earth is biogenic graphite in 3.7 billion-year-old metasedimentary rocks discovered in Western Greenland[9] and microbial mat fossils found in 3.48 billion-year-old sandstone discovered in Western Australia.[10][11] Nevertheless, several studies suggest that life on Earth may have XXXXXXXXX

将 scroll到p但不是XXXXXXXXXXX

任何建议都会受到高度赞扬。

Answer 1

您可能会这样做。

HTML

<p>Here is a paragraph</p>
</p>Here is another paragraph</p>

<input type="button" value="previous" id="previous" />
<input type="text" placeholder="enter a searchstring" />
<input type="button" value="next" id="next" />

请记住，此 HTML 实际上不会滚动，因为它可能比您的屏幕短得多。不要滚动，而是在下面的代码中添加控制台日志，以查看它是否从顶部指向正确的位置。

jQuery

// the following function will search for all 'tags' containing 'value' in DOM order
var working = false;
function searchWordsReturnOffsets(value, tags){
    // this will prevent the function from executing while its still in an execution cycle.
    if(working) return;
    else working = true;
    var all = [];
    $(tags).each(function(){
        if($(this).text().indexOf(value) >= 0){
            // temporarily wrap them in a findable object we can locate
            $(this).html($(this).html().replace(value,"<span class='searchvalue'>" + value + "</span>"));
            // lets do another foreach to find every instances' offset
            $(this).find("span.searchvalue").each(function(){
                all.push($(this).offset().top);
            });
            // remove the findable objects again
            $(this).html($(this).html().replace("<span class='searchvalue'>" + value + "</span>",value));
        }
    });
    return all;
}
$(document).ready(function(){
    var current = 0;
    var positions = [];
    $("#search").on("keyup", function(){
        // here we will keep track of the paragraphs and reset to the first
        positions = searchWordsReturnOffsets($(this).val(), "p");
        current = 0;
        $("body,html").animate({scrollTop : positions[current]});
    });
    $("#next").click(function(){
        if(positions[current + 1] != undefined){
            current++;
            $("body,html").animate({scrollTop : positions[current]});
        }
    });
    $("#previous").click(function(){
        if(positions[current - 1] != undefined){
            current--;
            $("body,html").animate({scrollTop : positions[current]});
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var working = false;
function searchWordsReturnOffsets(value, tags){
    if(working) return;
    else working = true;
	var all = [];
	$(tags).each(function(){
		if($(this).text().indexOf(value) >= 0){
			$(this).html($(this).html().replace(value,"<span class='searchvalue'>" + value + "</span>"));
			 $(this).find("span.searchvalue").each(function(){
			        all.push($(this).offset().top);
			    });
			$(this).html($(this).html().replace("<span class='searchvalue'>" + value + "</span>",value));
		}
	});
    working = false;
	return all;
}

$(document).ready(function(){
	var current = 0;
	var positions = [];
    $("#search").on("keyup", function(){
    	positions = searchWordsReturnOffsets($(this).val(), "p");
    	current = 0;
        if(positions[current] != undefined){
          console.log(positions[current]);
        }
    });
    $("#next").click(function(){
    	if(positions[current + 1] != undefined){
    		current++;
            console.log(positions[current]);
    	}
    });
    $("#previous").click(function(){
    	if(positions[current - 1] != undefined){
    		current--;
            console.log(positions[current]);
    	}
    });
})
</script>

<p>Here is a paragraph</p>
<p>Here is another paragraph<br/>With a second line to see we get three results when searching 'ere'.</p>

<input type="button" value="previous" id="previous" />
<input type="text" placeholder="enter a searchstring" id="search" />
<input type="button" value="next" id="next" />