创建一个搜索框来查找文本

Question

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

我搜索周围的网页（和计算器），我无法找到相关的我需要一个答案）

我有什么做的想法，但我会卡在某个点。继承人到目前为止我的代码看起来像什么。

<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.") 
    } 

} 

Answer 1

那么，你的问题的一部分将是你的终止你的循环太早。应该看起来更像

​​