Question

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

这是一个很好的例子 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, "<span class='highlighted'>"+searchTerm+"</span>"));
            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, "<span class='match'>"+searchTerm+"</span>"));

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

demo

Answer 2

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

HTML

> <div data-role="content">
>     <div id="fulltext-search"> 
>         <input type="text" name="search-input" value="" placeholder="Type text here..."/>
>         <input type="button" name="search-action" value="Search"/>
>         <button id="searchPrevious"> &lt;&lt; </button>
>         <button id="searchNext"> &gt;&gt; </button>
>     </div>
> </div>

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, "<span class='match'>"+searchTerm+"</span>"));
            // 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;
}

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

2 个答案: