Find and Replace Text

Ideas: the text and then split stitching

The entire string is divided by a search string, it returns an array
Loop through the array, and to find the string with the highlight label

Precautions: Do not loop through the array each time to re-stitching stitching highlight tags, such arrays will last one more highlight label. Direct use join () method for splicing , to be spliced into them to label and character.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查找替换文字</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="box">
        <div id="content">
            目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。目前主要针对的是javascript培训。
        </div>
        <div id="open">
            <a class="unfold" href="javascript:;">展开</a>
            <ul style="display: none;">
                <li><a href="javascript:;" class="searchA">查找</a></li>
                <li><a href="javascript:;" class="replaceA">替换</a></li>
            </ul>
        </div>
        <div id="fun" style="display: none;">
            <div class="btns">
                <a href="javascript:;" class="active searchFun">查找</a>
                <a href="javascript:;" class="replaceFun">替换</a>
            </div>

            <div id="search" style="display: none;">
                <input class="searchTxt" type="text" />
                <input class="searchBtn" type="button" value="" />
            </div>
            <div id="replace">
                <input class="repOldTxt" type="text" />
                <input class="repNewTxt" type="text" />
                <input class="replaceBtn" type="button" value="" />
            </div>
        </div>

    </div>
<script type="text/javascript">
(function(){
    /*
        思路：
        通过查找的字符串将整个字符串进行分割，返回数组
        循环数组，并给查找的字符串加上高亮标签
    */
    var box = document.querySelector("#box");
    var cont = box.querySelector("#content");
    var contVal = cont.innerHTML;
    var open = box.querySelector("#open");
    var unfold = box.querySelector(".unfold");
    var openUl = box.querySelector("#open ul");
    var searchA = box.querySelector("#open .searchA");
    var replaceA = box.querySelector("#open .replaceA");

    var fun = box.querySelector("#fun");
    var search = fun.querySelector("#search");
    var replace = fun.querySelector("#replace");
    var searchFun = fun.querySelector(".btns .searchFun");
    var replaceFun = fun.querySelector(".btns .replaceFun");

    //查找功能
    var searchTxt = search.querySelector(".searchTxt");
    var searchBtn = search.querySelector(".searchBtn");

    //替换功能
    var repOldTxt = replace.querySelector(".repOldTxt");
    var repNewTxt = replace.querySelector(".repNewTxt");
    var replaceBtn = replace.querySelector(".replaceBtn");

    //点击展开时，查找和替换ul显示
    unfold.onclick = function(){
        openUl.style.display = "block";
    };
    //点击右侧查找按钮，将fun div 显示，并显示查找div
    searchFun.onclick = searchA.onclick = function(){
        fun.style.display = "block";
        search.style.display = "block";
        //有可能点击替换后再次点击查找按钮
        replace.style.display = "none";
    };
    //点击右侧替换按钮，将fun div 显示，并显示替换div。且将查找的active清除，并给替换加上active
    replaceFun.onclick = replaceA.onclick = function(){
        fun.style.display = "block";
        search.style.display = "none";
        replace.style.display = "block";
    };

    //查找功能实现
    searchBtn.onclick = function(){
        var searchVal = searchTxt.value;
        if(searchVal === ""){
            alert("请输入需要查找的文字");
            return;
        }

        var searchArr = contVal.split(searchVal);
        
        // var spanStr = "";
        //将数组每位加上高亮标签后再连接
        // searchArr.forEach(function(item){
        //     spanStr += item + "<span>"+ searchVal +"</span>";
        // });
        //将得到的数组再转为字符串
        searchArr.join("<span>"+ searchVal +"</span>");
        cont.innerHTML = searchArr.join("<span>"+ searchVal +"</span>");
        
    }

    //替换功能实现
    replaceBtn.onclick = function(){
        var repOld = repOldTxt.value;
        var repNew = repNewTxt.value;
        
        if(repOld === ""){
            alert("请输入需要查找的文字");
            return;
        }
        if(repNew === ""){
            alert("请输入需要替换的文字");
            return;
        }

        var searchArr = contVal.split(repOld);
        // var spanStr = "";
        //将数组每位加上高亮标签后再连接
        // searchArr.forEach(function(item){
        //     spanStr += item + "<span>"+ repNew +"</span>";
        // });
        //将得到的数组再转为字符串
        searchArr.join("<span>"+ repNew +"</span>");
        cont.innerHTML = searchArr.join("<span>"+ repNew +"</span>");
    }

})();
</script>
</body>
</html>

CSS style file:

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

input {
    padding: 0;
}

li {
    list-style: none;
}

#box {
    width: 800px;
    height: 700px;
    margin: 0 auto;
    position: relative;
    background-image: url(./images/bg.png);
    background-repeat: no-repeat;
}

#content {
    position: absolute;
    top: 162px;
    left: 140px;
    width: 400px;
    font-size: 14px;
    padding: 18px;
    box-sizing: border-box;
    color: #004654;
    border: solid 1px #abdde7;
    border-radius: 2px;
    background: #eef8fa;
    line-height: 1.5;
}

#open {
    position: absolute;
    top: 162px;
    right: 140px;
    text-align: center;
    vertical-align: bottom;
}

#open a {
    display: block;
    width: 100px;
    height: 80px;
    line-height: 120px;
    border-radius: 2px;
}

#open>a {
    background-color: #90e2f2;
    color: white;
    background-image: url(./images/add.png);
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

#open li a {
    /* background-color: #C0C0C0; */
    color: #fff;
    margin-top: 24px;
}

#open li:nth-child(1) a {
    background-color: #a8a6f5;
    background-image: url(./images/search.png);
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

#open li:nth-child(2) a {
    background-color: #9fe7a9;
    background-image: url(./images/change.png);
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

#fun {
    position: absolute;
    width: 570px;
    height: 158px;
    bottom: 62px;
    left: 115px;
    background-color: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 10px;
}

#fun .btns {
    /* width: 570px;
    margin: 0 auto;
    height: 50px;
    border-bottom: 2px solid #E73100; */
}

#fun .btns a {
    display: inline-block;
    width: 100px;
    height: 40px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    border-radius: 2px;
}

#fun .btns a:nth-child(1) {
    background-color: #a8a6f5;
}

#fun .btns a:nth-child(2) {
    background-color: #9fe7a9;
    margin-left: 20px;
}

#search,
#replace {
    height: 30px;
    display: none;
    margin-top: 14px;
}

#search input:nth-child(2) {
    background-color: #a8a6f5;
    background-image: url(./images/search.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#replace input:nth-child(3) {
    background-color: #9fe7a9;
    background-image: url(./images/change.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#fun input {
    height: 25px;
    width: 170px;
    background-color: #eef8fa;
    border: solid 1px #abdde7;
    border-radius: 2px;
    height: 46px;
}


/* #fun input:focus {
    outline-color: #E73100;
} */

#fun input[type="button"] {
    width: 100px;
    vertical-align: bottom;
    border: none;
}

span {
    background-color: #FFFF00;
}

result:

1275012490

Published 95 original articles · won praise 115 · views 120 000 +

Private letter concerns

Find and Replace Text

Guess you like