在jquery中从页面搜索文本时获取&错误(不自然的功能)？

Question

我在页面上搜索文本.一切都好.但是只有一个问题是,当用户搜索&它搜索时,还会附加带放大器的数据.你能告诉我它为什么会发生吗？

这是我的小提琴:http://jsfiddle.net/ravi1989/wjLmx/22/

请输入&,然后点击搜索,再次点击搜索,搜索,然后找到问题.

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());

            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
            $('.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');                
            });
            $('.previous_h').off('click').on('click', function () {

                i--;

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

                    $('.match').removeClass('highlighted');
                    $('.match').eq(i).addClass('highlighted');
            });




            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");
    }


});

Answer 1

在HTML中,要获取角色&,请使用角色实体:&.因此搜索HTML文本时,你一定会发现那些(你也可能发现<并 和其他字符实体).您的代码正在使用此HTML:

&

......并将其更改为:

<span class="match highlighted">&</span>amp;

......所以你在文中看到了amp;.

这是该代码的一般问题的具体示例.不幸的是,我认为代码采用的方法太复杂而无法纠正.我认为,为了解决这一整类问题,你根本不必在HTML中进行替换.相反,遍历文本节点的匹配元素,并做他们的置换nodeValues,这将是正常的字符串(只包含&等),而不是HTML编码的实体.您将不得不使用splitText分割文本节点(两次,在您要替换的文本之前和之后),然后将中间位放在span您创建的via中createElement,插入span第二个分割点的前面.

这将是一般的解决方案:不要试图对replaceHTML 做.

现在,你可以很容易地解决这个特定的 bug,把它放在HTML上的替换之前:Fiddle

if (searchTerm === "&") {
    searchTerm = "&";
    searchTermRegEx = new RegExp(searchTerm, "ig");
}

......但这不能解决一般问题.解决一般问题可能需要使用文本节点完全改变您的方法,如前所述.

附注:您将用户的搜索词直接传递给RegExp构造函数.你真的希望你的用户正确输入正则表达式吗？[例如,如果他们键入,结果将是无效的正则表达式.如果你想从字面上搜索他们输入的内容,你必须要么不使用正则表达式,要么转义正则表达式中的特殊字符.