javascript實現html中關鍵字查詢


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #content{
                width :500px;
                height:300px;
                border: 1px solid 0###;
                margin: 30px auto;
            }
            #search{
                width :500px;
                height:300px;
                border: 1px;
                margin: 30px auto ;
                
                
            }
            #change{
                background: yellow;
                
                
            }
        </style>
        <script>
            
            window.onload=function()
            {
                var btn=document.getElementById('btn');
                var texts=document.getElementById('texts');
                //var content=document.getElementById('content');
                var content=document.getElementsByClassName('con')[0];
            
                var str=content.innerHTML;
                
                
                
                console.log(str);
                //console.log(str)
                btn.onclick=function(){
                    
                    var val=texts.value;
                    if (val=="")
                    {
                        alert("請輸入內容");
                    }
                    if(str.indexOf(val)==-1)
                    {
                        alert('你輸入的內容不在范圍內');
                    }
                    else
                    {
                        content.innerHTML=str.split(val).join('<span id="change">'+val+'</span>');
                    }
                }
            }

        </script>
    </head>
    <body>
        <div  class="con" id="content" >
            1. 您可以上傳或是從郵件附件中摘取文件並保存於您郵箱的網絡存儲空間中, 您將可以在發送郵件時直接將網絡存儲中的附件加入到待發郵件中.

            2. 因為存儲文件夾使用的是您的郵箱空間, 所以您需要注意合理分配存儲文件夾的數據量.

            3. 在您刪除存儲文件夾下的子文件夾時, 需要先將子文件夾中的文件轉移或刪除, 否則子文件夾無法被刪除.

            4. 您可以通過設置密碼或是不設置密碼的方式共享您的存儲文件夾數據.

        </div>    
        <div
            <div  class="con1" id="content" >
            3. 在您刪除存儲文件夾下的子文件夾時, 需要先將子文件夾中的文件轉移或刪除, 否則子文件夾無法被刪除.

            4. 您可以通過設置密碼或是不設置密碼的方式共享您的存儲文件夾數據.
          </div>
                
            <input type="text" id="texts"/>
            <input type="button" value="查找" id ="btn"/>
        </div>
        
    </body>
</html>

實現效果:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM