我对 jquery 搜索有疑问，突出显示并跳转到突出显示的代码

Question

我正在使用来自this site 的代码 还有running jsfiddle。 我注意到，当您在小提琴示例中搜索时，您输入的单词将替换为实际结果，我试图将其删除，因为我只需要查找并突出显示。如果您搜索“”，我也会遇到错误，我正在尝试通过调整代码来解决它，但老实说，我不了解整个过程。非常欢迎任何帮助。

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";                             //default selector is body 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;
}

    $(document).ready(function() {
        $('#search-button').on("click",function() {
            if(!searchAndHighlight($('#search-term').val(), "#bass")) {
                alert("No hay resultados");
            }
        });
    });

Answer 1

替换

var selector = selector || "body"; 

与

 var selector = selector || "#bodyContainer";

解释：

问题在于您的 regex 与 body tag 中的值匹配，即它还试图匹配 children tags 的值，例如 '<br>' 中的 'b' 。

预期的行为是仅在包含数据的container 内搜索，即bodyContainer

编辑：基于 cmets。

那是因为regex is ignoring case for matching 和您的replace function replaces the found value with the query string。因此，如果找到的值为 EMPTY 且查询字符串为 eMpTy，则您的正则表达式将匹配它，并且您的替换函数将用查询文本替换实际值（以及添加跨度）

Answer 2

gaurav5430 说你做的是对的。您正在使用搜索词并将其替换为实际字母。您需要做的是获取捕获术语并突出显示它。我很确定有更有效的方法，但我快速而肮脏的方法是在 if(matches) 情况下

        $('.highlighted').removeClass('highlighted');       //Remove old search highlights
        var index;
        for (index = 0; index < matches.length; ++index) {  //Go through all the matched cases 
            var wordreg = new RegExp(matches[index]);       //get a new regex that has the exact casing and wording
            $(selector).html($(selector).html()             //then find that and replace it with right casings
                .replace(wordreg, "<span class='highlighted'>"+matches[index] +"</span>"));
        }

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

它很丑，但它有效。这是 jsFiddle http://jsfiddle.net/z7fjW/265/

**编辑

当您对文本进行正则表达式时，您会得到一个匹配的字符串数组。例如：你在 'Hey hey heEY heY' 中搜索 'Hey'，你会得到一个字符串数组 ['Hey', 'hey', 'hEY', 'heY']。

您必须遍历此数组，找到与不忽略大小写的正则表达式对应（匹配）的字符串，然后用突出显示的字符串替换。查看我代码中的 for 循环。