JS实现查询关键词高亮效果

最新推荐文章于 2024-01-11 23:33:29 发布

m445331341

最新推荐文章于 2024-01-11 23:33:29 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/m445331341/article/details/41412629

版权

在页面上查询关键，使其高亮显示，实现代码如下：

CSS样式：

 
        <style type= 
        "text/css" 
        > 
       
        .highlight        { 
       
        background-color 
        : yellow; 
       
        } 
       
        </style>

javascript:

 
        function  
        highlight() { 
       
        clearSelection();  
        //先清空一下上次高亮显示的内容； 
       
        var  
        searchText = $.trim($( 
        '#txtKeyWord' 
        ).val());  
        //获取你输入的关键字； 
       
        if  
        (searchText.length > 0) { 
       
        var  
        regExp =  
        new  
        RegExp(searchText,  
        'g' 
        );  
        //创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了； 
       
        $( 
        '#dialogue .dhc' 
        ).each( 
        function  
        () 
        //遍历要查询的区域； 
       
        { 
       
        var  
        html = $( 
        this 
        ).html(); 
       
        var  
        newHtml = html.replace(regExp,  
        "<span class='highlight'>"  
        + searchText +  
        '</span>' 
        );  
        //将找到的关键字替换，加上highlight属性； 
       
        $( 
        this 
        ).html(newHtml);  
        //更新文章； 
       
        }); 
       
        } 
       
        //prekeyword = searchText; 
       
        } 
       
        function  
        clearSelection() { 
       
        $( 
        '#dialogue .dhc' 
        ).each( 
        function  
        () 
        //遍历 
       
        { 
       
        $( 
        this 
        ).find( 
        '.highlight' 
        ).each( 
        function  
        () 
        //找到所有highlight属性的元素； 
       
        { 
       
        var  
        thishtml = $( 
        this 
        ).html(); 
       
        $( 
        this 
        )[0].outerHTML = thishtml; 
       
        // $(this).replaceWith(thishtml); //将他们的属性去掉； 
       
        }); 
       
        }); 
       
        }