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

Question

我正在从页面中搜索文本。一切安好。但只有一个问题，当用户搜索&时，它会搜索但也会附加amp数据。您能告诉我为什么会发生这种情况吗？

这是我的 fiddle :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 中的替换。相反，循环遍历 text nodes并在其 nodeValue 上进行替换，这将是普通字符串(仅包含 & 等)，而不是 HTML 编码的实体。您必须使用 splitText分割文本节点(两次，在您要替换的文本之前和之后)，然后将中间位放入您通过 createElement 创建的 span 中，在第二个分割点前面插入 span。

这将是一般解决方案:不要尝试在 HTML 上进行replace。

现在，您可以非常轻松地解决这个特定错误，只需将其放在 HTML 上进行替换的行之前即可:Fiddle

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

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

<小时/>

旁注:您将用户的搜索词直接传递到 RegExp 构造函数中。您真的希望您的用户正确输入正则表达式吗？例如，如果他们输入 [，结果将是无效的正则表达式。如果您想逐字搜索他们输入的内容，则必须不使用正则表达式，或者转义正则表达式中的特殊字符。