創建一個搜索框來查找文本

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

那麼，你的問題的一部分將是你的終止你的循環太早。應該看起來更像

​​