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文本包含也存在于网址中的任何单词（例如，在上面的文字中，store内也存在href="check%20Store%20quality.aspx"。），那么网址也是替换为我用来突出显示该单词的<mark></mark>。我需要帮助我在阅读clsUrl中的文字时如何忽略<a href="">类或textHightLight function标记。

请参阅此处的示例：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
    }

以下是 Fiddle

注意：考虑到表格中只有1个anchor标记，我们会给出此解决方案。如果您在搜索中有多个锚标记，那么您需要分离具有特定类的整个td，然后在特定行的第一个td元素之后将其附加回来。 [如果这是要求，你可以发表评论]

编辑 - 1 ：因此，以下解决方案看起来比我之前建议的更好，它不会分离任何元素，只会过滤每个a的{{1}}标记的td并为您提供搜索结果。看看

table

这是 Fiddle

忽略URL突出显示搜索文本

1 个答案: