找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发文字的查找与替换（数组的方法、字符串的方法）

2019-01-18 分类：教程 阅读(861) 评论(0)
手游前端开发招聘
web前端开发招聘运城
酷竞NBA前端开发招聘

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>文字查找替换</title>
        <style>
            input {
                padding: 0;
                border: none;
            }
            .boxtop {
                width: 660px;
                height: 350px;
                border: 1px solid #aadce6;
                border-radius: 10px;
                padding: 30px;
                margin: 0 auto 20px;
            }
            .left {
                float: left;
                width: 480px;
                height: 318px;
                padding: 10px;
                border: 1px solid #aadce6;
                background-color: #edf8fa;
                font: 18px/38px ‘宋体’;
                border-radius: 5px;
            }
            .right-top {
                float: left;
                width: 125px;
                height: 100px;
                font: 30px/100px ‘宋体’;
                color: #ffffff;
                background-color: #90e2f2;
                text-align: center;
                margin-left: 20px;
                margin-bottom: 20px;
                border-radius: 5px;
            }
            .h100 {
                height: 100px;
                font: 30px/100px ‘宋体’;
            }
            .h50 {
                height: 50px;
                font: 30px/50px ‘宋体’;
            }
            .right-bot {
                display: none;
            }
            .find {
                float: left;
                width: 125px;
                color: #ffffff;
                background-color: #a8a6f5;
                text-align: center;
                margin-left: 20px;
                margin-bottom: 20px;
                border-radius: 5px;
            }
            .change {
                float: left;
                width: 125px;
                border-radius: 5px;
                color: #ffffff;
                background-color: #9fe7a9;
                text-align: center;
                margin-left: 20px;
                margin-bottom: 20px;
            }
            .boxbot {
                width: 650px;
                height: 130px;
                padding: 35px;
                border: 1px solid #aadce6;
                border-radius: 10px;
                margin: 0 auto;
                display: none;
            }
            .close {
                width: 40px;
                height: 40px;
                float: right;
                color: #90e2f2;
                font: 40px/40px arial;
            }
            .btns {
                height: 70px;
            }
            .input {
                height: 65px;
            }
            .inputs {
                height: 65px;
                display: none;
            }
            .text {
                width: 480px;
                height: 48px;
                border: 1px solid #aadce6;
                background-color: #edf8fa;
                vertical-align: top;
                border-radius: 5px;
            }
            .text1 {
                width: 240px;
                height: 48px;
                border: 1px solid #aadce6;
                background-color: #edf8fa;
                vertical-align: top;
                border-radius: 5px;
            }
            .con {
                height: 50px;
                width: 120px;
                background-color: #a8a6f5;
                font: 30px/50px ‘微软雅黑’;
                color: #fff;
                border-radius: 5px;
            }
            .ml0 {
                margin-left: 0;
            }
            .color {
                background-color: yellow;
            }
            .color1 {
                background-color: chocolate;
            }
        </style>
    </head>
    <body>
        <section id=”box”>
            <div class=”boxtop”>
                <div class=”left”>
                    妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。
                </div>
                <div class=”right-top”>展开</div>
                <div class=”right-bot”>
                    <div class=”find h100″>查找</div>
                    <div class=”change h100″>替换</div>
                </div>
            </div>
            <div class=”boxbot”>
                <div class=”btns”>
                    <div class=”find h50 ml0″>查找</div>
                    <div class=”change h50″>替换</div>
                    <div class=”close”>x</div>
                </div>
                <div class=”input”>
                    <input
                        class=”text”
                        type=”text”
                        value=””
                        placeholder=”请输入要查找的内容”
                    />
                    <input type=”button” value=”确定” class=”con” />
                </div>
                <div class=”inputs”>
                    <input
                        class=”text1 “
                        type=”text”
                        value=””
                        placeholder=”请输入要查找的内容”
                    />
                    <input
                        class=”text1″
                        type=”text”
                        value=””
                        placeholder=”请输入要替换的内容”
                    />
                    <input type=”button” value=”确定” class=”con” />
                </div>
            </div>
        </section>
        <script>
            var onOff = document.querySelector(‘.boxtop .right-top’)
            var rightBot = document.querySelector(‘.boxtop .right-bot’)
            var boxBot = document.querySelector(‘.boxbot’)
            var close = document.querySelector(‘.close’)
            var btLeft = document.querySelector(‘.left’)
            var text = document.querySelector(‘.input .text’)
            var con1 = document.querySelector(‘.input .con’)
            var con2 = document.querySelector(‘.inputs .con’)
            var finds = document.querySelectorAll(‘.find’)
            var changes = document.querySelectorAll(‘.change’)
            var input = document.querySelector(‘.input’)
            var inputs = document.querySelector(‘.inputs’)
            var texts = inputs.querySelectorAll(‘.inputs .text1’)
            var state = true
            onOff.onclick = function() {
                if (state) {
                    onOff.innerHTML = ‘收起’
                    rightBot.style.display = ‘block’
                    boxBot.style.display = ‘block’
                    state = false
                    find()
                    change()
                } else {
                    onOff.innerHTML = ‘展开’
                    rightBot.style.display = ‘none’
                    boxBot.style.display = ‘none’
                    state = true
                }
            }
            close.onclick = function() {
                boxBot.style.display = ‘none’
            }
            for (var i = 0; i < finds.length; i++) {
                finds[i].onclick = function() {
                    input.style.display = ‘block’
                    inputs.style.display = ‘none’
                    btLeft.innerHTML = btLeft.innerHTML
                        .split(‘<span class=”color1″>’)
                        .join(”)
                        .split(‘</span>’)
                        .join(”)
                }
                changes[i].onclick = function() {
                    input.style.display = ‘none’
                    inputs.style.display = ‘block’
                    btLeft.innerHTML = btLeft.innerHTML
                        .split(‘<span class=”color”>’)
                        .join(”)
                        .split(‘</span>’)
                        .join(”)
                }
            }
            //查找
            function find() {
                con1.onclick = function() {
                    var str = text.value
                    btLeft.innerHTML = btLeft.innerHTML
                        .split(‘<span class=”color”>’)
                        .join(”)
                        .split(‘</span>’)
                        .join(”)
                    if (str === ”) {
                        alert(‘请输入查找的内容’)
                    } else if (btLeft.innerHTML.indexOf(str) === -1) {
                        alert(‘没有查找的内容’)
                    } else {
                        btLeft.innerHTML = btLeft.innerHTML
                            .split(str)
                            .join(‘<span class=”color”>’ + str + ‘</span>’)
                        text.value = ”
                    }
                }
            }
            //替换
            function change() {
                con2.onclick = function() {
                    var str1 = texts[0].value
                    var str2 = texts[1].value
                    btLeft.innerHTML = btLeft.innerHTML
                        .split(‘<span class=”color1″>’)
                        .join(”)
                        .split(‘</span>’)
                        .join(”)
                    if (str1 === ”) {
                        alert(‘请输入查找的内容’)
                    } else if (btLeft.innerHTML.indexOf(str1) === -1) {
                        alert(‘没有替换的内容’)
                    } else {
                        btLeft.innerHTML = btLeft.innerHTML
                            .split(str1)
                            .join(‘<span class=”color1″>’ + str2 + ‘</span>’)
                        texts[0].value = ”
                        texts[1].value = ”
                    }
                }
            }
        </script>
    </body>
</html>
昆明web前端开发招聘
宜昌招聘前端开发
杭州前端开发公司招聘
赞(0)
前端开发者 » 前端开发文字的查找与替换（数组的方法、字符串的方法）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论