实现简单的文字查找替换

来源：互联网发布：切片软件 cura 编辑：程序博客网时间：2024/06/06 05:23
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#box{    width:500px;    height:500px;    margin:30px auto;    border:10px solid black;    padding:30px;}.word{    font-size:20px;    text-indent:2em;}.con{    width:150px;    height:50px;    border:1px solid #ccc;    float:left;    background:"";    line-height: 50px;    }.active{    background:darkred;    color:white;    width:150px;    height:50px;    float:left;    line-height: 50px;    border:1px solid #ccc;}.aaa{    background:;    color:black;    width:150px;    height:50px;    line-height: 50px;    float:left;    border:1px solid #ccc;}a{    text-decoration: none;    text-align: center;}</style><script type="text/javascript">window.onload=function(){//获取标签    var oDiv = document.getElementsByTagName("a");    var oSpan = document.getElementsByTagName("span")[0];    var oP = document.getElementsByTagName("p");    var oInput = document.getElementsByTagName("input");    var str = oSpan.innerHTML;//让替换的文本框先设置隐藏      oP[1].style.display ="none";//点击选择并且改变样式，控制显示查找和替换的文本框    oDiv[0].onclick=function(){        oDiv[0].className="active";        oDiv[1].className="aaa";        oP[1].style.display="none";        oP[0].style.display="block";    }    oDiv[1].onclick =function(){        oSpan.innerHTML=str;        oDiv[1].className="active";        oDiv[0].className="aaa";        oP[1].style.display="block";        oP[0].style.display="none";    }    //先实现查找功能    //如果没有输入要查找的字符，弹出提示框    oInput[1].onclick=function(){        if(oInput[0].value==""){            alert("请输入要查找的字符");    }    var str1 = oInput[0].value;    //如果要查找的字符存在    if(str.indexOf(str1)!=-1)    {    //split 将字符串分割成数组,默认以逗号作为分隔符    //*      *["↵          教养和文化是两回事，有的", "很有文化，但是很没教养，有的", "没有什么太高的学历和学识，但仍然很有教   养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。", "生那么长，未知的东西那么多。", "与", "之间的关系往往是相互的，与", "为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。", "", "都有他的难处，何必强求于", "。", "生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。", "出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，", "生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。↵           "]      */        oSpan.innerHTML=str;        var arr=oSpan.innerHTML.split(str1);        str1 = arr.join('<span style="color:red;">'+str1+'</span>');        //join 将数组再连接为字符串，则便加上了我们设置的样式        oSpan.innerHTML=str1;    }else{//如果不存在，则弹出提示框未查找到            alert('未查找到');            oInput[0].value='';        }    }    //下面实现的是替换功能    oInput[4].onclick=function(){    var str2 = oInput[2].value;    var str3 = oInput[3].value;    //同样我们做一个简单的输入验证    if(str.indexOf(str2)!= -1){        if(oInput[2].value == ""){            alert("请输入被替换的字符");        }else if(oInput[3].value == ""){            alert("请输入要替换成的字符");        }    //同样也用到了split和join        var arr1 = oSpan.innerHTML.split(str2);        str2 = arr1.join(str3);    //替换成指定的字符        oSpan.innerHTML=str2;        }else{    //如果不存在要被替换的字符，弹出提示框            alert("没有该字符存在");        }    }}</script></head><body><div id="box"><span class="word">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</span><div><a href="javascript:;" id="con" class="active con"  >查找并变成红色</a><a href="javaxcript:;" id="con2" class="con" >替换为指定字符</a><br/><br/><br/><p><input  id="input1" type="text"/><input type="button" value="查找" /></p><p><input type="text"><input id="input2" type="text" /><input type="button" value="替换" /></p></div></div></body></html>
阅读全文
0 0