查找替换【总结】
需求：
需求分析：
实现查找和替换
实现思路：
1.用要找的字符作为分隔符，分割整个字符串成数组，因为分隔符会被删掉，所以不用操心它的去留
2.用包装后的字符串格式的结点作为连接符，将1得到的数组join()回去，实现高亮或替换
难点：
因为css只能对节点设置样式，所以查找高亮本质上是给要找的文字包装了一下，如果自己的js写，肯定要涉及到：删掉所有原查找的原字符串，按顺序保存剩下的字符串并在空位添加一些标识，将替换或查找的字符串包装一下，通过上面的标识符插入回去，这中间肯定涉及到几个for循环，而且代码也许会很凌乱。
难点解决方案
用js提供的str.split 和 arr.join来实现就挺不错的
解决不了的难点
查找的字符太多或查找的字符包含回车有可能会查找不出
涉及的新知识
str.split();
att.join();
优化方向：
可以直接通过复制原文黏贴进查找框进行查找，用正则
备注：
查找的字符太多或查找的字符包含回车有可能会查找不出，不知到是不是作为分隔符，它的长度有限制，
还是html标签的<br/>它也会找到，例如【尊敬的领导： 您好....】，中间的空格实际上是回车，而在复制的时候回车标签<br/>显示不出，而 原始文本是通过innerHTML获得的里面包含<br/>这个标签，所以找的时候会因为没有<br/>而提示找不到。
又或者是因为在编辑器里为了格式好看做的缩进在html里生成了一些innerHTML找不到的字符，所以查找的时候也找不到。
【因为innerHTML会得到包括html标签和一些想不到的字符，所以可能要用到正则去掉这些东西】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; } p{ width: 400px; height: 300px; overflow-y: scroll; float: left; text-indent: 2em; } .con{ width: 520px; height: 330px; } #btns{ float: left; width: 70px; margin-left: 16px; height: 30px; overflow: hidden; } #btns a,#btns span{ width: 70px; height: 30px; background: #673AB7; float: left; color: #fff; text-align: center; line-height: 30px; } #btns span:hover{ cursor: pointer; } #btns .ac:hover{ background: #34146d; padding-top: 2px; height: 28px; } #inputWrap{ width: 410px; height: 108px; position: relative; display: none; } #btnDiv{ width: 100%; height: 30px; border-bottom: 3px solid #9C27B0; } #btnDiv a{ width: 50%; height: 30px; text-align: center; line-height: 30px; float: left; color: #333; font-weight: bold; background: #cbafd0; } #btnDiv a:hover,#btnDiv .active2{ background: #9C27B0; color: #fff; } .bar{ width: 400px; border: 3px solid #9C27B0; border-top: none; padding: 20px 0 20px 4px; position: absolute; top: 33px; left: 0; z-index: 1; } .bar input{ outline: none; font-size: 14px; } .bar input[type="button"]{ width: 80px; height: 28px; } .bar input[type="text"]{ width: 146px; height: 28px; } #btnDiv #close{ position: absolute; width: 30px; height: 30px; background: #dbdbdb; color: #999; } #btnDiv #close:hover{ color: #010101; } </style> </head> <body> <div class="con"> <p id="content"> 妙味课堂是北京妙味趣学信息技术有限公司旗下的IT培训品牌。 创办多年来我们一直恪守住IT培训的原则与底限，扎扎实实研发课程、不断提升服务质量， 在公司需求和学员进度中巧妙把握平衡，帮助学员打下坚实技术基础，不断向各大IT公司输送优秀开发人才！ 2007年12月07日 - “妙味课堂” 品牌名称和网站域名 “www.miaov.com” 诞生； 2008年05月14日 - 研发完成 “XHTML+CSS2精品课程”，第二年后，妙味第一版网站上线； 2010年09月06日 - 研发完成 “JavaScript实战课程”，并配合2010年新官网上线，同时对外发布； 2011年至2013年，妙味课堂精准研发出领先行业的 “HTML5&CSS3课程”，并配合2013年最新官网同时对外发布； 2014年至今，妙味课堂重磅推出超值的“VIP会员”收费服务，并配合优良的IT培训资源、成熟的远程课堂方案， 彻底打通线上线下环节，为广大学习爱好者提供了一个更加便捷、有效、实用的IT学习方案！ </p> <div id="btns"> <span href="javascript:;" style="margin-bottom: 14px;">展开</span> <a href="javascript:;" class="ac">查找</a> <a href="javascript:;" class="ac">替换</a> </div> </div> <div id="inputWrap"> <div id="btnDiv"> <a href="javascript:;">查找</a> <a href="javascript:;">替换</a> <a href="javascript:;" id="close">X</a> </div> <div class="bar"> <input type="text" /> <input type="button" value="查找" /> </div> <div class="bar"> <input type="text" /> <input type="text" /> <input type="button" value="替换" /> </div> </div> <script src="getId.js"></script> <script src="main.js"></script> </body> </html>
$(function(){ var oBtns = $('btns'); oBtns.onOff = true; var oSpan = oBtns.getElementsByTagName('span')[0]; var oBtn0 = oBtns.getElementsByTagName('a')[0]; var oBtn1 = oBtns.getElementsByTagName('a')[1]; oBtn0.index = 0; oBtn1.index = 1; var oCloseBtn = $('close'); var inputWrap = $('inputWrap'); var oDivBtn = $('btnDiv'); var oBar0 = inputWrap.getElementsByTagName('div')[1]; var oBar1 = inputWrap.getElementsByTagName('div')[2]; var eBtn0 = oDivBtn.getElementsByTagName('a')[0]; var eBtn1 = oDivBtn.getElementsByTagName('a')[1]; //文本标签 var oP = $('content'); //原始文本 var originalStr = oP.innerText; //收缩展开 oSpan.onclick = function(){ if(oBtns.onOff){ oBtns.style.height = 104 + 'px'; oSpan.innerHTML = '收缩'; }else{ oBtns.style.height = 30 + 'px'; oSpan.innerHTML = '展开'; } oBtns.onOff = !oBtns.onOff; } //叉叉按钮 oCloseBtn.onclick = function(){ inputWrap.style.display = 'none'; } //****侧边栏按钮 oBtn0.onclick = function(){ inputWrap.style.display = 'block'; alertDisplayA(); alertClassA(); } oBtn1.onclick = function(){ inputWrap.style.display = 'block'; alertDisplayB(); alertClassB(); } //// //****tab按钮 eBtn0.onclick = function(){ oP.innerHTML = originalStr; alertDisplayA(); alertClassA(); clearInputCon(oBar1.getElementsByTagName('input')[0]); clearInputCon(oBar1.getElementsByTagName('input')[1]); } eBtn1.onclick = function(){ oP.innerHTML = originalStr; alertDisplayB(); alertClassB(); clearInputCon(oBar0.getElementsByTagName('input')[0]); } //// //****变换样式函数 function alertDisplayA(){ oBar1.style.display = 'none'; oBar0.style.display = 'block'; } function alertDisplayB(){ oBar0.style.display = 'none'; oBar1.style.display = 'block'; } function alertClassA(){ eBtn0.className = 'active2'; eBtn1.className = ''; } function alertClassB(){ eBtn1.className = 'active2'; eBtn0.className = ''; } //// //清除輸入框內容 function clearInputCon(ele){ ele.value = ''; } //****主要功能区 var eInputBar0 = oBar0.getElementsByTagName('input')[0]; var eBtnBar0 = oBar0.getElementsByTagName('input')[1]; var eInputBar1_0 = oBar1.getElementsByTagName('input')[0]; var eInputBar1_1 = oBar1.getElementsByTagName('input')[1]; var eBtnBar1 = oBar1.getElementsByTagName('input')[2]; eBtnBar0.onclick = function(){ var strOri = eInputBar0.value; reString(strOri,strOri); } eBtnBar1.onclick = function(){ var strOri = eInputBar1_0.value; var reStr = eInputBar1_1.value; reString(strOri,reStr); } //进入函数默认reStr=ele2，即要替换的内容，如果要查找就传两个一样的参数，如果替换就传不一样的，总之后面都后面的代码都行得通 /* 如果没有输入查找内容，警告提示，否则进入else 通过分割字符串数组的长度确定有没有这个字符，没有警告提示return停止，否则下一步 ##替换比查找多了一个警告的操作，本质上都是将内容拿出来包装一下再插回去，如果第二个参数为空，插入的就是空的span，实现了替换 ##如果两个参数不一样，说明要替换，如果ele2无内容，提示是否要删除，否就return停止 */ function reString(ele1,ele2){ var reStr = ele2 ? ele2 : ele1; if( !ele1 ){ alert('请输入要查找或替换的内容'); return; }else{ var splitArr = originalStr.split(ele1); if(splitArr.length == 1){ alert('找不到【'+ele1+'】，请重新输入'); console.log( originalStr.indexOf(reStr) ); return; } if( !ele2 && ele1!=ele2 ){ reStr = ''; if( !confirm('您确定要删除【'+ ele1 +'】吗？') ){ console.log(reStr); return; } } var newStr = '<span style="background: yellow">'+ reStr +'</span>' oP.innerHTML = splitArr.join(newStr); originalStr = splitArr.join(reStr); alert('查找或替换成功'); console.log(originalStr.charAt( originalStr.indexOf(reStr) )); } } });
