<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div>
    <input id="search" type="text" placeholder="输入当前章节要搜索内容..."/>
    <span id="search-btn" style="cursor: pointer">搜索</span>
</div>
<div id="content">
    <p>这是要搜索的内容哦!!</p>
</div>
</body>
<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>
</html>

转载:js 实现 ctrl+F查找内容_xiaogg3678的博客-CSDN博客_js ctrl+f
https://blog.csdn.net/xiaogg3678/article/details/124035558