0

我正在从页面中搜索文本。一切都很好。但是只有一个问题，当用户搜索&它搜索时，还会用amp附加数据附加数据。你能告诉我为什么会发生吗？

这是我的小提琴：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");
    }


});
4

1 回答 1

5

在 HTML 中，要获取字符&，请使用字符实体：&amp;。因此，在搜索 HTML 文本时，您一定会找到那些（您还可能会找到&lt;和&nbsp;其他字符实体）。您的代码正在使用此 HTML：

&amp;

...并将其更改为：

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

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

这是该代码的一般问题的具体示例。不幸的是，我认为代码采用的方法太复杂而无法纠正。我认为为了解决这一类问题，您根本不必在 HTML 中进行替换。相反，循环遍历匹配元素中的文本节点并在它们nodeValue的 s 上进行替换，这将是普通字符串（包含 just&等），而不是 HTML 编码的实体。您必须使用splitText拆分文本节点（两次，在您要替换的文本之前和之后），然后将中间位放入span您创建的 via中，在第二个拆分点的前面createElement插入。span

那将是一般的解决方案：不要尝试replace在 HTML 上做。

现在，您可以很容易地解决这个特定的错误，方法是将它放在 HTML 上进行替换的行之前：Fiddle

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

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

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

于 2013-07-17T09:07:34.257 回答