忽略突出显示搜索文本中的URL

Question

我有一个像这样的JavaScript：

    <script type="text/javascript">
        function getHighlight() {
            var MainText = '';
            var toSearch = 'store';
            MainText = MainText + '<table>';
            MainText = MainText + '<tr><td><b>Stores</b></td></tr>';
            MainText = MainText + '<tr><td class="clsUrl"><a href="check%20Store%20quality.aspx" style="color:blue; text-decoration:none;" target="_blank">check%20Store%20quality.aspx</a></td></tr>';
            MainText = MainText + '<tr><td><p>Some Description about store...</p><br /></td></tr>';
            MainText = MainText + '</table>';
            $('.dv_searchResult').append(MainText);
            textHightLight($(".dv_searchResult").html(), toSearch, ".dv_searchResult");
       }

    function textHightLight(totText, term, dvCls) {
        var src_str = totText;

        term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("(" + term + ")", "gi");

        src_str = src_str.replace(pattern, "<mark>$1</mark>");
        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

        $(dvCls).html(src_str);
    }
        </script>

在这里，我将完整的html绑定到div dv_searchResult ，然后突出显示div中的toSearch文本。 它的工作在一定程度上很好。 唯一的问题是，如果toSearch文本包含url中也存在的任何单词（例如，在上面的文本中， store存在于href="check%20Store%20quality.aspx" ），则该URL也将替换为我用来突出显示单词的<mark></mark> 。 我需要帮助，在阅读textHightLight function的文本时如何忽略clsUrl类或<a href="">标记。

请参阅此处的示例： https : //jsfiddle.net/3jfs1kum/

请帮助。

Answer 1

确定，经过大量研究，我为您的问题提供了一种解决方案：

$('input[type=submit]').click( function() {
 var MainText = '';
            var toSearch = 'store';
            MainText = MainText + '<table>';
            MainText = MainText + '<tr><td><b>Stores</b></td></tr>';
            MainText = MainText + '<tr><td class="clsUrl"><a href="check%20Store%20quality.aspx" style="color:blue; text-decoration:none;" target="_blank">check%20Store%20quality.aspx</a></td></tr>';
            MainText = MainText + '<tr><td><p>Some Description about store...</p><br /></td></tr>';
            MainText = MainText + '</table>';
            $('.dv_searchResult').append(MainText);
            textHightLight($(".dv_searchResult"), toSearch, ".dv_searchResult");
            //instead of sending html to textHightLight function just send the whole element  
});
function textHightLight(totText, term, dvCls) {

        a=$(totText).find('a').detach();//Just detach anchor tag from table for time being and keep a copy of it to attach it back on later part.
        var src_str = $(totText).html();//Once done take the html and start searching
        var childNodes = document.body.childNodes;
        term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("(" + term + ")", "gi");

        src_str = src_str.replace(pattern, "<mark>$1</mark>");

        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

        $(dvCls).html(src_str);
    if(a)//Once search is done attach the particular tag back to the place where it was.
         //If you don't want to display it in result just comment this part of code from if
        {
            $('.clsUrl').append(a);
         }//till here
    }

这是小提琴

注意 ：考虑到表中只有1个anchor标记，因此提供了此解决方案。 如果要避免在搜索中使用多个锚标记，则需要分离具有特定类的整个td ，然后将其附加到特定行的第一个td元素之后。 [如果需要，您可以发表评论]

编辑-1 ：因此，以下解决方案看起来比我之前建议的要好，并且它不会分离任何元素，而只是从table每个td中过滤出a标签并为您提供搜索结果。 看一看

function textHightLight(totText, term, dvCls) {
        var clas=$(totText).attr('class');
        var elem=$('div.'+clas+' table tr td:not(:has(a))');
        var src_str = "";
        $.each(elem,function(index,value){
            src_str+=$(value).html();
        });
        term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("(" + term + ")", "gi");

        src_str = src_str.replace(pattern, "<mark>$1</mark>");

        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

        $(dvCls).html(src_str);
}

这是小提琴