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>