4

我在搜索文本时遇到了一个问题。我认为这是正则表达式/替换问题的问题。

我的搜索功能运行良好，但问题是当我搜索大写字母“N”时，所有小写字母“n”都会变为大写字母。

这是我使用的...尝试搜索“N”，您会看到所有小的“n”都变为大写“N”。

http://jsfiddle.net/ravi1989/4BAau/3/

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 || "#realTimeContents"; //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm, "ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if (matches != null && matches.length > 0) {
            $('.highlighted').removeClass('highlighted'); //Remove old search highlights  

            //Remove the previous matches
            $span = $('#realTimeContents span');
            $span.replaceWith($span.html());
            var content = "<span class='match'>" + searchTerm + "</span>";
            var replaced = $(selector).text().replace(searchTermRegEx, content);
            $(selector).html(replaced);;
            $('.match:first').addClass('highlighted');

            var i = 0;

            $('.next_h').off('click').on('click', function () {
                i++;

                if (i >= $('.match').length) i = 0;

                $('.match').removeClass('highlighted');
                $('.match').eq(i).addClass('highlighted');
                $('.ui-mobile-viewport').animate({
                    scrollTop: $('.match').eq(i).offset().top
                }, 300);
            });
            $('.previous_h').off('click').on('click', function () {

                i--;

                if (i < 0) i = $('.match').length - 1;

                $('.match').removeClass('highlighted');
                $('.match').eq(i).addClass('highlighted');
                $('.ui-mobile-viewport').animate({
                    scrollTop: $('.match').eq(i).offset().top
                }, 300);
            });




            if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}

$(document).on('click', '.searchButtonClickText_h', function (event) {

    $(".highlighted").removeClass("highlighted").removeClass("match");
    if (!searchAndHighlight($('.textSearchvalue_h').val())) {
        alert("No results found");
    }


});
4

1 回答 1

1

主要问题是您正在创建一个变量，该变量包含在跨度中传入的搜索词，而不是找到的匹配项。因此，当您将所有正则表达式匹配项（不区分大小写，因为“ig”）替换为该包装的搜索词时，它会用传入的确切文本替换该词的所有实例，而不管大小写。值得注意的是，每个字母都会发生这种情况，而不仅仅是 N。您以大写形式搜索的任何字母都会替换文档中的小写字母。

a.replace('thing','otherthing'要解决此问题，请尝试传入一个函数作为第二个参数，而不是进行 1:1 替换 ( )。当你这样做时，字符串中的每个单独的匹配项都会传递给该函数并被函数的返回值替换。

例如：

var a = 'abbacca';
var r = new RegExp('A','ig');
a.replace(r, function(m){ 
  return '_' + m + '_'; 
});

// returns '_a_bb_a_cc_a_'

所以代替这个：

var content = "<span class='match'>" + searchTerm + "</span>";
var replaced = $(selector).text().replace(searchTermRegEx, content);

尝试这个：

var replaced = $(selector).text().replace(searchTermRegEx, function(m){
  return '<span class="match">' + m + '</span>';
});

这是这个变化的小提琴

于 2013-07-21T08:35:34.527 回答