jQuery 仿浏览器Ctrl + F查找功能关键词飘红上下一个定位

原创 2024-02-22 本文共8686个字，预计耗時22分钟 467次阅读

文章摘要：浏览器自带的网页搜索功能很好用，可以实现关键词飘红，并可以点击上下定位到关键词位置，对于大长段的文字十分有用，但是有个问题是有些用户是不知道使用这个查找功能的，并且那个搜索框的位置是不能定义的，如果想要更多自定义功能就需要使用脚本模拟了。 ...

浏览器自带的网页搜索功能很好用，可以实现关键词飘红，并可以点击上下定位到关键词位置，对于大长段的文字十分有用，但是有个问题是有些用户是不知道使用这个查找功能的，并且那个搜索框的位置是不能定义的，如果想要更多自定义功能就需要使用脚本模拟了。

下面的代码使用jQuery模拟查找功能，关键词飘红并可以上下定位,代码量不多，就全部放在一个HTML文件里了，实现的结果如图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Find with Navigation</title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var currentPosition = -1;
    var highlightedElements = [];
    $('#findButton').click(function() {
        var searchTerm = $('#searchInput').val();
        if (searchTerm.trim() !== '') {
            currentPosition = -1;
            findAndHighlight(searchTerm);
            currentPosition = 0;
        }
    });
    $('#prevButton').on('click',function() {
        navigate('prev');
    });
    $('#nextButton').on('click',function() {
        navigate('next');
    });
    $('#closeButton').on('click',function() {
        $('.search-box').hide()
    });

    function findAndHighlight(searchTerm) {
        $('#main').find('.highlight').removeClass('highlight');
        highlightedElements = [];

        var content = $('#main').text();
        var searchTermRegex = new RegExp('(' + searchTerm + ')', 'ig');
        var matches = content.match(searchTermRegex);
        
        if (matches) {
            var htmlContent = $('#main').html();
            htmlContent = htmlContent.replace(searchTermRegex, '<span class="highlight">$1</span>');
            $('#main').html(htmlContent);

            $('.highlight').each(function(index) {
                highlightedElements.push($(this));
            });
        }
    }
    function navigate(direction) {
        console.log('navigate')
        if (highlightedElements.length === 0) return;

        if (direction === 'next') {
            currentPosition = (currentPosition + 1) % highlightedElements.length;
        } else if (direction === 'prev') {
            currentPosition = (currentPosition - 1 + highlightedElements.length) % highlightedElements.length;
        }

        $('html, body').animate({
            scrollTop: highlightedElements[currentPosition].offset().top
        }, 500);
    }
});
</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #main {
        width: 100%;
        margin: 0 auto;
        max-width: 680px;
    }
    #main .highlight {
        background-color: #ff9632;
    }
    .search-box{
        position: fixed;
        right: 20px;
        top: 200px;
        border-radius: 3px;
        border: 1px solid #ddd;
        height: 30px;
        background-color: #fff;
        box-shadow: 0 3px 4px 0 rgba(0,0,0,.06);
        font-size: 0;
        padding: 6px;
    }
    .search-box input{
        height: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        border: none;
        border-radius: 0;
        color: #505050;
        font-weight: inherit;
        outline: 0;
        padding-left: 1rem;
        border-right: 1px solid #ccc;
        margin-right: 5px;
    }
    .search-box button{
        height: 100%;
        border: 0;
        cursor: pointer;
        width: 30px;
        background-color: #fff;
    }
    .search-box button#prevButton svg{
        transform: rotate(-90deg);
    }
    .search-box button#nextButton svg{
        transform: rotate(90deg);
    }
</style>
</head>
<body>
    <div class="search-box">
        <input type="text" id="searchInput" placeholder="搜索词">
        <button id="findButton"><svg t="1708582633341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307" width="16" height="16"><path d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z" fill="#515151" p-id="4308"></path></svg></button>
        <button id="prevButton"><svg t="1708582718584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5616" width="16" height="16"><path d="M693.333333 512c0 14.933333-4.266667 29.866667-14.933333 40.533333l-234.666667 277.333334c-23.466667 27.733333-64 29.866667-89.6 8.533333-27.733333-23.466667-29.866667-64-8.533333-89.6L546.133333 512l-200.533333-236.8c-23.466667-27.733333-19.2-68.266667 8.533333-89.6 27.733333-23.466667 68.266667-19.2 89.6 8.533333l234.666667 277.333334c10.666667 10.666667 14.933333 25.6 14.933333 40.533333z" fill="#515151" p-id="5617"></path></svg></button>
        <button id="nextButton"><svg t="1708582718584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5616" width="16" height="16"><path d="M693.333333 512c0 14.933333-4.266667 29.866667-14.933333 40.533333l-234.666667 277.333334c-23.466667 27.733333-64 29.866667-89.6 8.533333-27.733333-23.466667-29.866667-64-8.533333-89.6L546.133333 512l-200.533333-236.8c-23.466667-27.733333-19.2-68.266667 8.533333-89.6 27.733333-23.466667 68.266667-19.2 89.6 8.533333l234.666667 277.333334c10.666667 10.666667 14.933333 25.6 14.933333 40.533333z" fill="#515151" p-id="5617"></path></svg></button>
        <button id="closeButton"><svg t="1708583239508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7286" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#515151" fill-opacity="0" p-id="7287"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#515151" p-id="7288"></path></svg></button>
    </div>

    <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    <p>Nulla facilisi. Mauris rutrum elementum purus, eget varius dui suscipit nec. Phasellus sodales nulla id tempus lobortis. Duis condimentum ligula non ante varius, sed blandit quam volutpat. Sed tempus, eros id placerat malesuada, libero sem mollis velit, vel congue lacus turpis in nulla. Donec commodo auctor libero, in dignissim sapien rutrum in. Donec malesuada velit et lorem feugiat vehicula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    <p>Nulla facilisi. Mauris rutrum elementum purus, eget varius dui suscipit nec. Phasellus sodales nulla id tempus lobortis. Duis condimentum ligula non ante varius, sed blandit quam volutpat. Sed tempus, eros id placerat malesuada, libero sem mollis velit, vel congue lacus turpis in nulla. Donec commodo auctor libero, in dignissim sapien rutrum in. Donec malesuada velit et lorem feugiat vehicula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    <p>Nulla facilisi. Mauris rutrum elementum purus, eget varius dui suscipit nec. Phasellus sodales nulla id tempus lobortis. Duis condimentum ligula non ante varius, sed blandit quam volutpat. Sed tempus, eros id placerat malesuada, libero sem mollis velit, vel congue lacus turpis in nulla. Donec commodo auctor libero, in dignissim sapien rutrum in. Donec malesuada velit et lorem feugiat vehicula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    <p>Nulla facilisi. Mauris rutrum elementum purus, eget varius dui suscipit nec. Phasellus sodales nulla id tempus lobortis. Duis condimentum ligula non ante varius, sed blandit quam volutpat. Sed tempus, eros id placerat malesuada, libero sem mollis velit, vel congue lacus turpis in nulla. Donec commodo auctor libero, in dignissim sapien rutrum in. Donec malesuada velit et lorem feugiat vehicula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    <p>Nulla facilisi. Mauris rutrum elementum purus, eget varius dui suscipit nec. Phasellus sodales nulla id tempus lobortis. Duis condimentum ligula non ante varius, sed blandit quam volutpat. Sed tempus, eros id placerat malesuada, libero sem mollis velit, vel congue lacus turpis in nulla. Donec commodo auctor libero, in dignissim sapien rutrum in. Donec malesuada velit et lorem feugiat vehicula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in nulla vehicula, molestie est ut, fermentum orci. Duis tristique, magna et tempus vehicula, libero ex faucibus libero, id fermentum dui nisl non enim. Integer ut erat urna. Sed at ligula sit amet elit viverra euismod. Fusce vitae ligula nec purus aliquam tincidunt.</p>
    </div>
</body>
</html>

HTML文件一并附上，直接下载也行。

本文地址：https://doc.ydqic.com/48626.html

版权免责申明
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）

常见问题F&Q