字串查詢和替換

liang_qq發表於2017-06-08
字串

主要使用方法：
1. text.indexOf(“a”) ,在字串text文字中查詢字串a，若有，返回a首次出現的位置，若沒有返回-1。
2. text.split(“a”),以字串a分割字串text，並轉換為陣列形式，若a為空，則分割為單個字元
3. arr.join(“a”),將陣列轉換為字串，每項間以a相隔擷取字串text中下標strat到end之間的字串
主要思路：
1. 通過Id獲取要操作的文字內容text
var Otext = document.getElementById(“text”);
var Ovalue = Otext.innerHTML;
2. 設定按鈕，實現文字收縮展開功能。
Otext.innerHTML = Ovalue.substring(0,50);
收縮時，擷取段落前50個字元
off1=true;
off1=!off1;
為實現一次點選收縮，下次點選展開，需設定開關，設初值為true，點選一次，off1取反。
3. 查詢字串，新增黃色背景。
獲取使用者輸入的字串str
var arr1 = Ovalue.split(str1 );
用字串str分割字串，轉換為陣列
將陣列轉換為字串，每項間以加有黃色背景的str相隔
Ovalue = Otext.innerHTML;
替換後，更新P段落中的大段文字內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>  
    <style>
        /*  邊框樣式  */
        #div{
                width:500px;
                padding:10px;
                border:5px solid yellowgreen;
                margin:0 auto;  }
        /*  段落文字樣式 */
        div p{
                line-height:25px;
                font-family: "微軟雅黑";
                color:#333;  }
        /*  查詢、替換按鈕樣式  */
        #div>div{
                width:70px;
                height:40px;
                border:4px solid yellowgreen;
                line-height:40px;
                text-align: center;
                float:left;
                margin-left:10px;
                margin-bottom:10px;  }
        .active{ background-color: #ffcd06; font-size: 18px; }   /*  被選按鈕樣式  */
        #div >p{ clear:both; padding-left:10px;}
        #btn{ display:block; margin:0 auto;}
        button{  width:60px; height:30px;}  /*  輸入框後按鈕樣式  */
        button a{
                text-decoration:none;
                text-align: center;
                line-height:20px;
                padding:3px;  }
        input{ height:25px; text-indent: 1em;}   /*  輸入框樣式  */
    </style>
</head>
<body>
<div id="div">
    <p id="text">教養和文化是兩回事，有的人很有文化，但是很沒教養，有的人沒有什麼
        太高的學歷和學識，但仍然很有教養，很有分寸。教養是帶有某種天生的素質和一點一滴的
        積累。人生那麼長，未知的東西那麼多。人與人之間的關係往往是相互的，與人為善，也是
        與自己為善。讓自己更平和一點，更豁達一點，對於身邊的過錯，讓自己更寬容一點。人人
        都有他的難處，何必強求於人。人生在世，行路匆匆，生活充滿變數，時而樂極生悲，時而
        苦盡甘來，一切不必較真，只須篤定前行。要敢於認錯，既然錯了，就要糾正，虛假是味毒
        藥，真實能幫你把失去的贏回來；要敢於擔當，迴避不是辦法。人出生時，是一塊質樸的石
        塊，有稜有角，生氣勃勃。但是，在生活無情的打磨中，人生慢慢被磨去稜角，變得圓滑而
        世故。要做堅守在懸崖峭壁上石塊，勇敢忍受風霜的雕刻，永遠保留自己的稜角。不要做河
        流裡的石頭，享受微波多情的撫摸，最後變成一塊光亮的鵝卵石。</p>
    <div>查詢</div>
    <div>替換</div>
    <p>
        <input id="Oinput1" type="text"/>
        <button id="btn1"><a href="#">查詢</a></button>
    </p>
    <p>
        <input  id="Oinput2" type="text"/>
        <input id="Oinput3" type="text"/>
        <button id="btn2"><a href="#">替換</a></button>
    </p>
    <button id="btn"><a href="#">收縮</a></button>
</div>

<script>
    var Otext = document.getElementById("text");
    var Obtn = document.getElementById("btn");
    var Ovalue = Otext.innerHTML;
    var off1 = true;

    var Odiv = document.getElementById("div").getElementsByTagName("div"); //獲取兩個選擇按鈕
    var Op = document.getElementById("div").getElementsByTagName("p");  //獲取兩個選擇按鈕對應輸入框
    //  初始值，預設選擇查詢
    Odiv[0].className = "active";
    Op[2].style.display = "none";
    //    選擇查詢
    Odiv[0].onclick = function () {
        for(i=0;i<2;i++){
            Odiv[i].className = "aaa";  // 取消兩個選擇按鈕的樣式
            Op[i+1].style.display = "none";  //關閉兩個選擇按鈕對應輸入框
        }
        Odiv[0].className = "active"; //給查詢按鈕新增active樣式
        Op[1].style.display = "block"; // 開啟查詢按鈕相應輸入框
    }
    //    選擇替換
    Odiv[1].onclick = function () {
        for(i=0;i<2;i++){
            Odiv[i].className = "aaa";
            Op[i+1].style.display = "none";
        }
        this.className = "active";
        Op[2].style.display = "block";
    }
    var Bfind = document.getElementById("btn1");    //    查詢按鈕
    var Breplace = document.getElementById("btn2");   //    替換按鈕
    var Oinput1 = document.getElementById("Oinput1");
    var Oinput2 = document.getElementById("Oinput2");
    var Oinput3 = document.getElementById("Oinput3");
//    查詢按鈕
    Bfind.onclick = function () {
        if(Oinput1.value=="")
            alert("please input");   // 如果點選查詢按鈕時，輸入框為空，彈出警示框
        else{
            str = Oinput1.value;  // 輸入內容賦給str
            if(Ovalue.indexOf(str)==-1)
                alert("未找到查詢內容！");  // 若未找到查詢內容，彈出警示框
            else{
                var arr1 = Ovalue.split(str);  //以str分割字串，轉化為陣列
                var Ospan = arr1.join("<span style='background-color: yellow'>"+str+"</span>");
                //   陣列每項間用帶有黃色背景的str連線，轉化為字串，賦給ospan
                Otext.innerHTML=Ospan;
            }
        }
        Ovalue = Otext.innerHTML;  //更新P段落中的大段文字內容
    }
//    替換按鈕
    Breplace.onclick=function () {
        if(Oinput2.value=="")
            alert("please input");
        else{
            str1 = Oinput2.value;
            str2 = Oinput3.value;
            if(Ovalue.indexOf(str1)==-1)
                alert("未找到需替換的內容！");
            else{
                var arr1 = Ovalue.split(str1);
                var Ospan = arr1.join("<span style='background-color: yellow'>"+str2+"</span>");
                Otext.innerHTML=Ospan;
            }
        }
        Ovalue = Otext.innerHTML;   //替換後，更新P段落中的大段文字內容
    }
//收縮、展開按鈕
    Obtn.onclick = function () {
        if(off1){  // 判斷off1是否為真
            Otext.innerHTML = Ovalue.substring(0,50); //  擷取段落前50個字元
            Obtn.innerHTML="展開";  //  按鈕內文字由‘收縮’變為‘展開’
            for(i=0;i<2;i++){       //  收縮時，關閉兩個選擇按鈕及相應輸入框
                Odiv[i].style.display = "none";
                Op[i+1].style.display = "none";
            }
        }
        else{

            Otext.innerHTML= Ovalue;
            Obtn.innerHTML="收縮";
            for(i=0;i<2;i++){
                Odiv[i].style.display = "block";
                Op[i+1].style.display = "block";
            }
            Odiv[0].onclick();  //  文字展開式，預設顯示選擇查詢按鈕
        }
        off1=!off1;  //  因最終應實現點一次收縮，再點一次展開，故每次點選後off1取反
    }
</script>
</body>
</html>

這裡寫圖片描述

這裡寫圖片描述

相關文章