如何使用jquery中的下一个和上一个function从页面搜索文本

我正在页面上实现文本搜索function。我找到了很多链接。但我需要更多的function。

这是一个很好的例子http://jsfiddle.net/z7fjW/137/

function searchAndHighlight(searchTerm, selector) { if(searchTerm) { //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters var selector = selector || "body"; //use body as selector if none provided var searchTermRegEx = new RegExp(searchTerm,"ig"); var matches = $(selector).text().match(searchTermRegEx); if(matches) { $('.highlighted').removeClass('highlighted'); //Remove old search highlights $(selector).html($(selector).html() .replace(searchTermRegEx, ""+searchTerm+"")); if($('.highlighted:first').length) { //if match found, scroll to where the first one appears $(window).scrollTop($('.highlighted:first').position().top); } return true; } } return false; } 

但是我需要它只搜索第一个单词（先出现）然后使用next然后进入下一个（进入下一个位置）。然后前一个（转到上一个位置）.as在记事本中？ 在查询中这可能吗？

Answer 1

而不是直接highligt他们添加类“匹配”并使用它

 $(selector).html($(selector).html() .replace(searchTermRegEx, ""+searchTerm+"")); //to highlighted specific index $('.match:first').addClass('highlighted'); //to work with index you need you var matches to know what indexes exist $('.match').eq(3).addClass('highlighted'); 

演示

Answer 2

我查看了http://jsfiddle.net/ruddog2003/z7fjW/141/ ，这是一个很好的起点。 我稍微修改了逻辑以允许下一个和前一个，并且更加健壮。 它不完美，但这里遵循我的AJAX格式的代码

HTML

 > 
 > 
 >  >  >  <<  >  >>  > 
 >  

CSS

 #document_fulltext [data-role="content"] #fulltext-search { width: 100%; text-align: center; position: fixed; top: 0px; background-color: rgba(255,255,255, 0.8); z-index: 10000; border-bottom: 1px solid #000; } .highlighted { color: white; background-color: rgba(255,20,0,0.5); padding: 3px; border: 1px solid red; -moz-border-radius: 15px; border-radius: 15px; } 

JAVASCRIPT EVENT

 $(document).ready(function( ) { loadFulltext(); //Load full text into the designated div function loadFulltext(searchString){ //reset $("#fulltext").html(''); filePath = 'http://localhost/income_tax_act_58_of_1962.html'; $.ajax({ url: filePath, beforeSend: function( xhr ) { xhr.overrideMimeType( "text/html; charset=UTF-8;" ); }, cache: false, success: function(html){ $("#fulltext").html(html); // if search string was defined, perform a search if ((searchString != undefined) && (searchString != '') && (searchString != null)){ if(!searchAndHighlight(searchString, '#fulltext')) { alert("No results found"); } } }, fail: function(){ alert('FAIL'); } }); } /* ------------------------------ CLICK - REFRESH DOCUMENTS LIST --- */ $(document).on('click', 'input[name="search-action"]', function ( event ){ // load fresh copy of full text into the div and perform a search once it is successfully completed loadFulltext($('input[name="search-input"]').val()); }); }); 

JAVASCRIPT FUNCTION

 function searchAndHighlight(searchTerm, selector) { if(searchTerm) { $('.highlighted').removeClass('highlighted'); //Remove old search highlights $('.match').removeClass('match'); //Remove old matches //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters var selector = selector || "body"; //use body as selector if none provided var searchTermRegEx = new RegExp(searchTerm,"ig"); var matches = $(selector).text().match(searchTermRegEx); // count amount of matches found if(matches) { alert('['+matches.length+'] matches found'); // replace new matches $(selector).html($(selector).html().replace(searchTermRegEx, ""+searchTerm+"")); // add highligt to first matched class $('.match:first').addClass('highlighted'); // keep track of next and previous. Start at one because on SEARCH the forst one was already highlightes var matchIndex = 1; // look out for user click on NEXT $('#searchNext').on('click', function() { //Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found if (matchIndex >= matches.length){ matchIndex = 0; } var currentMatch = $('.match'); currentMatch.removeClass('highlighted'); var nextMatch = $('.match').eq(matchIndex); matchIndex += 1; nextMatch.addClass('highlighted'); // scroll to the top of the next found instance -n to allow easy viewing $(window).scrollTop(nextMatch.offset().top-30); }); // look out for user click on PREVIOUS $('#searchPrevious').on('click', function() { //Re-set match index to create a wrap effect if the amount if next clicks exceeds the amount of matches found if (matchIndex < 0){ matchIndex = matches.length-1; } var currentMatch = $('.match'); currentMatch.removeClass('highlighted'); var previousMatch = $('.match').eq(matchIndex-2); matchIndex -= 1; previousMatch.addClass('highlighted'); // scroll to the top of the next found instance -n to allow easy viewing $(window).scrollTop(previousMatch.offset().top-30); }); // if match found, scroll to where the first one appears if($('.highlighted:first').length) { $(window).scrollTop($('.highlighted:first').position().top); } return true; } } return false; }