js實現查找關鍵字效果

一般情況下，我們操作頁面上都會有查找某個關鍵字的的功能，那么今天也簡單寫一下關鍵查找頁面上關鍵字的效果！首先頁面上要寫入一部分內容，然后要有搜索框，來看一下布局：

 <input type="text" />
    <input type="button" value="查找" />
    <p id="box">
        輕輕的我走了，正如我輕輕的來；我輕輕的招手，作別西天的雲彩。<br/>
        那河畔的金柳，是夕陽中的新娘；波光里的艷影，在我的心頭盪漾。<br/>
        軟泥上的青荇，油油的在水底招搖；在康河的柔波里，我甘心做一條水草！ <br/>
        那榆蔭下的一潭，不是清泉，是天上虹；揉碎在浮藻間，沉淀着彩虹似的夢。<br/>
        尋夢？撐一支長篙，向青草更青處漫溯；滿載一船星輝，在星輝斑斕里放歌。<br/>
        但我不能放歌，悄悄是別離的笙簫；夏蟲也為我沉默，沉默是今晚的康橋！<br/>悄悄的我走了，正如我悄悄的來；我揮一揮衣袖，不帶走一片雲彩
    </p>

簡單寫一下css：

        p { border:5px solid #ccc; background:#FFFF99; width:400px; padding:20px; font-size:16px; font-family:微軟雅黑; }
        span { background:yellow; }

接下來就是js實現代碼：

<script>
    window.onload=function(){
        var inp=document.getElementsByTagName("input");
        var oP=document.getElementById("box");

        inp[1].onclick=function(){
            var str = inp[0].value;
            if (!str)return; //若內容不存在即返回
            oP.innerHTML=oP.innerHTML.split(str).join('<span>'+str+'</span>')
        }
    };

</script>

來看一下實現之后的效果圖：

分析一下實現原理：

首先我們要知道查詢的內容，然后以此為分隔符，將頁面內容分為一個大的數組，然后要將所查詢的內容字符串加上標簽為了給其添加選中背景樣式，將其提取出來，然后再次將其轉化為字符串放入頁面中，這個時候就要用到join()方法了，就是將數組轉化為字符串，然后再次出現在頁面上即可。

關於實現原理我說的比較通俗，希望你們能明白！

好了，今天就這樣了！希望對大家有幫助！