获取和错误(非自然功能),同时在jquery中从页面搜索文本

Getting & error(unnatural functionality ) while search a text from page in jquery?

本文关键字:jquery 文本 搜索 错误 非自然 功能 获取      更新时间:2023-09-26

我正在从页面搜索文本。一切都很好。但是只有一个问题,当用户搜索它搜索时,还要用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");
    }

});

在 HTML 中,要获取字符&,请使用字符实体:&amp; 。因此,在搜索HTML文本时,您一定会找到这些(您可能还会找到&lt;&nbsp;以及其他字符实体(。您的代码采用以下 HTML:

&amp;

。并将其更改为:

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

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

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

这将是通用的解决方案:不要尝试在HTML上做replace

现在,您可以非常轻松地解决这个特定的错误,方法是将其放在HTML上替换的行之前: 小提琴

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

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


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