在网页的制作过程和代码功效中，我们经常会遇到这样的需求：文字的查找与替换，关于这样的需求，我们一般会有2中处理方式：数组的方法、字符串的方法。如下图实现的功能
那么如果实现这样的功能呢？下面是361源码分享的代码
<!DOCTYPE html><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>运行效果查看
以上就是文字的查找与替换（数组的方法、字符串的方法）介绍的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。新闻热点
疑难解答
