我的第一个ｗｅｂ前端博客

程序员文章站 2024-03-04 20:35:30

...

　　今天第一次写博客，刚注册了号。作为一个前端菜鸡，港真的我也不知道都要写些什么，设置头像上传了半年也没成功，想想还是先写博客吧，毕竟今天是高考第一天。要是有写的不好的地方还请含蓄表达，因为我喜欢听好话。

　
用JavaScript实现对文字段落中的字进行查找或替换。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>查找与替换</title>
        <style type="text/css">
            #box{width:600px;margin: 0 auto;border: 10px solid #222222;}
            #box h5{display: block;width: 560px;padding: 20px;margin: 0; font-size: 20px;color: #222222;line-height:28px;background: #ccc;}
            #box2{padding: 20px;}
            span{display: block; width: 100px;height: 30px;border: 1px solid #123456;float: left;text-align: center;line-height: 30px;margin-left: 10px;margin-bottom:20px ;}
            span a{text-decoration: none;color:#333333 ;}
            p{clear: both;}
            p input[type="text"]{width: 200px;height: 30px;border: 1px solid #333;margin-left: 10px;}
            p input[type="button"]{width: 50px;height: 35px;margin-left: 10px;}
            .active{background: orange;}
        </style>
    </head>
    <body>
        <div id="box">
            <h5>
                &nbsp;&nbsp;教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。
            </h5>
            <div id="box2">
                <span class="active">
                    <a href="javascript:;">查找</a>
                </span>
                <span>
                    <a href="javascript:;">替换</a>
                </span>
                <p>
                    <input type="text" placeholder="请输入要查找的字："/><input type="button" value="查找"/>
                </p>
                <p>
                    <input type="text" placeholder="请输入要被替换的字："/><input type="text" placeholder="请输入要替换的新字："/><input type="button" value="替换"/>
                </p>
                </div>          
        </div>      
        <script>
            window.onload=function(){
                var odiv=document.getElementsByTagName("span");
                var op=document.getElementsByTagName("p");
                var　oinput=document.getElementsByTagName("input");
                op[1].style.display="none";

                odiv[0].onclick=function(){
                    for(var i=0;i<odiv.length;i++){
                        odiv[i].className="wu";
                    }
                    this.className="active";
                    op[1].style.display="none";
                    op[0].style.display="block";
                }

                odiv[1].onclick=function(){
                    for(var i=0;i<odiv.length;i++){
                        odiv[i].className="wu";
                    }
                    this.className="active";
                    op[0].style.display="none";
                    op[1].style.display="block";
                }

                var dtext=document.getElementsByTagName("h5")[0];
                var dtxt=dtext.innerHTML;               
                //执行查找
                oinput[1].onclick=function(){
                    var wenzi=oinput[0].value;
                    if(wenzi==""){                                              
                        alert("请输入内容");     //判断输入框里是否有文字；                  
                    }else if(dtxt.indexOf(wenzi)!=-1){      //如果有执行查找字
                        var shengyu=dtext.innerHTML.split(wenzi);
                        //alert(shengyu);
                        wenzi=shengyu.join("<b style='background:orange;'>"+wenzi+"</b>")
                        dtext.innerHTML=wenzi;                  
                        }else{
                            alert("未找到："+wenzi);   //如果没有执行输出输入框里的内容
                        }
                };

                //执行替换
                oinput[4].onclick=function(){
                    var jiu=oinput[2].value;
                    var xin=oinput[3].value;

                    if(jiu==""){
                        alert("请输入被替换的内容");
                    }else if(xin==""){
                            alert("请输入要替换的内容");
                        }else if(dtxt.indexOf(jiu)!=-1){
                                var shengyu1=dtext.innerHTML.split(jiu);
                                //alert(shengyu1);
                                xin=shengyu1.join("<b style='background:orange;'>"+xin+"</b>")
                                //alert(xin);
                                dtext.innerHTML=xin;    
                            }else{
                                alert("未找到:"+jiu);
                            }
                }               
            }
        </script>
    </body>
</html>

在浏览器中运行结果:
我的第一个ｗｅｂ前端博客

实现查找功能，当输入框输入“人”时，文字段落中所有的人字都会改变背景色:
我的第一个ｗｅｂ前端博客

实现替换功能:
我的第一个ｗｅｂ前端博客

实现替换功能时，当输入要替换的字和被替换的字后，文字段里所有的“人”字会被“鱼”替换，并且显示背景色：
我的第一个ｗｅｂ前端博客

此外，实现：当输入框内没有输入文字时点击查找，弹出‘请输入文字’小窗口；：

我的第一个ｗｅｂ前端博客

实现：当被替换的字输入框内没有输入文字时点击查找，弹出‘请输入被替换的内容’小窗口；当被替换的字输入框内有输入文字时，而要替换的新字输入框没有文字时点击查找，弹出‘请输入要替换的内容’小窗口；：
我的第一个ｗｅｂ前端博客
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上就是这个JavaScript代码内容和可以实现的功能。

这是我第一次写博客，说实话感觉比前端代码还难写，写出的东西连我自己都嫌弃，丑。编辑器并没有可以直接改变字和图片大小的简单方式，就连上传个图片都很麻烦，总结还是因为我对Markdown编辑器的不熟悉和对……好吧，我编不下去了，欢迎各位皮皮虾来指导。

我的第一个ｗｅｂ前端博客