javascript实现浏览器Ctrl+F页面搜索功能

html结构代码

<div>
    <input id="search" type="text" placeholder="输入当前章节要搜索内容..."/>
    <span id="search-btn" style="cursor: pointer">搜索</span>
</div>
<div id="content">
    <p>这是要搜索的内容哦！！</p>
</div>

javascript代码

<script>
    var content = $('#content').html();
    $('#search-btn').click(function () {
        $('#content').html(content);
        var searchText = $('#search').val();
        if (searchText.length == 0) {
            return false;
        }
        var regExp = new RegExp(searchText, 'g');
        var newHtml = content.replace(regExp, '<span id="result" style="background:yellow;color:red;">' + searchText + '</span>');
        $('#content').html(newHtml);
        var X = $('#result').offset().top;
        var Y = $('#result').offset().left;
        window.scrollTo(X, Y);
    });
</script>

联系我

如果你还是不明白的话，或者本文章内资源下载不了，可以联系我，或者是加我的QQ群（群内有资源提供下载），大家可以多多交流：