实现简单的文字查找替换

最新推荐文章于 2024-01-03 23:18:28 发布

Sixteen_

最新推荐文章于 2024-01-03 23:18:28 发布

阅读量864

点赞数

分类专栏：文字查找替换功能的实现冒泡排序JS 文章标签：替换文字查找替换查找 js

本文链接：https://blog.csdn.net/Auyuer/article/details/72967721

版权

冒泡排序JS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

文字查找替换功能的实现

0 篇文章 0 订阅

订阅专栏

<!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>

Sixteen_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现简单的文字查找替换

<!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{ f
复制链接

扫一扫

专栏目录