昨天寫的例子是查找關鍵字，今天就在其基礎上更改一下便可實現可以替換這些關鍵字的效果，布局稍有改變：

<input type="text" />
<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[2].onclick=function
 
(){
            var str = inp[0].value;
            var str1= inp[1].value;//這裏是需要替換的關鍵字
            if (!str)return; //若內容不存在即返回
            oP.innerHTML=oP.innerHTML.split(str).join(‘<span>‘+str1+‘</span>‘)
        }
    };

</script>

實現效果如下：

好了，今天就這樣了，明天繼續！希望大家都能有所進步！

js實現查找替換關鍵字的效果