js实现字符串的查找和替换

来源：互联网发布：精通nginx中文第三版编辑：程序博客网时间：2024/06/05 19:39
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box{width: 600px;margin: 0 auto;border: 10px solid #9632cc;}#span1{display:block;width: 560px;overflow:hidden;background: #ccc;font-size: 20px;padding: 20px;}a{text-decoration: none;font-size: 20px;float: left;display: block;width: 100px;padding: 10px;text-align:center;color:black;}.active{background: orange;color: #fff;}p{clear: both;}#oprate{padding: 15px;}</style><script type="text/javascript">window.onload=function(){var ospan=document.getElementById("span1");var odiv= document.getElementsByTagName("a");//获取到所有divvar op=document.getElementsByTagName("p");var oinput=document.getElementsByTagName("input");        //第一个divop[1].style.display="none";odiv[0].onclick=function(){for(i=0;i<odiv.length;i++){odiv[i].className="";}this.className="active";op[1].style.display="none";        op[0].style.display="block";}//第二个divodiv[1].onclick=function(){for(i=0;i<odiv.length;i++){odiv[i].className="";}this.className="active";op[0].style.display="none";        op[1].style.display="block";}//查找部分oinput[1].onclick=function(){if(oinput[0].value==""){alert("输入为空，请重新输入")}else{                        var oValue=oinput[0].value;                        if(oText.indexOf(oValue)!=-1)                        {                            ospan.innerHTML=oText;                            var arr=ospan.innerHTML.split(oValue);                            oValue = arr.join('<span style="background:yellow;">'+oValue+'</span>');                            ospan.innerHTML=oValue;                        }else{                            alert('未查找到');                            oinput[0].value='';                        }}}//查找并替换部分                oinput[4].onclick=function(){                        if(oinput[2].value==""){                            alert("输入为空，请重新输入")                        }else{                            var oValue2=oinput[2].value;                            var oValue3=oinput[3].value;                            var oText = ospan.innerHTML;if(oText.indexOf(oValue2)!=-1)                                {                                    ospan.innerHTML=oText;                                    var arr=ospan.innerHTML.split(oValue2);                                    oValue = arr.join('<span style="background:#f1bbff;">'+oValue3+'</span>');ospan.innerHTML=oValue;                                }else{                                    alert('未查找到');                                    oinput[2].value='';                                }}                        }            }</script></head><body><div id="box"><span id="span1">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</span><div id="oprate"><a href="javascript:;" class="active">查找</a>    <a href="javascript:;">替换</a>    <br/>    <p>    <input type="text" />    <input type="button" value="查找">    </p>    <p><input type="text" />    <input type="text" /><input type="button" value="替换">    </p></div></div></body></html>
阅读全文
1 0