Javascript 创建搜索框以查找页面上的文本

我试图创建一个只使用html、css和javascript的搜索框来搜索我的页面中的文本，如果找到匹配的文本，该函数应该突出显示跨度内的文本

我在网上搜索（和stackoverflow），但找不到与我的需求相关的答案）

我知道该怎么办，但我在某一点上卡住了。到目前为止，我的代码是这样的

<script type="text/javascript">

function init(){
    //creates a variable equal to the value entered in the text box
    var lookfor = document.getElementById("q").value
    //splits the whole page into an array or words
    var words = document.body.innerHTML.split(" ");
    ///loops through the array to get each word
    for( var i=0; i<words.length; i++){

    }   
    //This is where I get lost, i dont know how to make it so that what you enter
    //in the textbox(lookfor) matches somthing on the page. it will get highlighted. i
    //was thinking about using the find object, but im new to javascript and dont know 
    //how to properly use find yet.
    if(lookfor == words[i]) //Find()------
    { 
        '<span class="highlight">' + words + '</span>'
    }
    else{
        alert("Sorry, your search returned no results! Please Try again.")
    }

}

函数init（）{
//创建与文本框中输入的值相等的变量
var lookfor=document.getElementById（“q”）.value
//将整个页面拆分为数组或单词
var words=document.body.innerHTML.split（“”）；
///循环遍历数组以获取每个单词
对于（var i=0；i嗯，部分问题是您过早终止for循环

<script type="text/javascript">

function init()
{
    //creates a variable equal to the value entered in the text box
    var lookfor = document.getElementById("q").value
    //splits the whole page into an array or words
    var words = document.body.innerHTML.split(" ");
    ///loops through the array to get each word
    for( var i=0; i<words.length; i++)
    {      
        //This is where I get lost, i dont know how to make it so that what you enter
        //in the textbox(lookfor) matches somthing on the page. it will get highlighted. i
        //was thinking about using the find object, but im new to javascript and dont know 
        //how to properly use find yet.
        if(lookfor == words[i]) //Find()------
        { 
            '<span class="highlight">' + words + '</span>'
        }        
    }
}


函数init（）
{
//创建与文本框中输入的值相等的变量
var lookfor=document.getElementById（“q”）.value
//将整个页面拆分为数组或单词
var words=document.body.innerHTML.split（“”）；
///循环遍历数组以获取每个单词
对于（var i=0；i使用内置文本栏Ctrl+F可以非常轻松地执行此操作。然后只需提示用户使用键盘快捷键搜索页面即可！
您这样做是为了迎接挑战吗？对我来说，这似乎没有必要，因为大多数浏览器都有内置的查找功能（通常
Ctrl+F
）我这样做是为了学校的作业。嗯……作业的一部分好的，我已经解决了这个问题，但我仍然无法将搜索到的单词与页面上的文本匹配。