JS查找和替换字符串列子

依赖工具函数库
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{
  8                 padding: 0;
  9                 margin: 0;
 10             }
 11             li{
 12                 list-style: none;
 13             }
 14             #box{
 15                 position: relative;
 16                  500px;
 17                 padding: 10px;
 18                 background: #eee;
 19             }
 20             #btnbox{
 21                 position: absolute;
 22                 right: -60px;
 23                 top: 0;
 24                  50px;
 25                 line-height: 25px;
 26                 background: #666666;
 27                 color: #fff;
 28                 
 29             }
 30             #btnbox li,#btnbox span{
 31                 display: block;
 32                 height: 25px;
 33                 padding: 5px;
 34             }
 35             #btnbox li:hover,#btnbox span:hover{
 36                 background: #0000FF;
 37                 cursor: pointer;
 38             }
 39             #btnbox ul{
 40                 display: none;
 41             }
 42             #dialog{
 43                 position: absolute;
 44                 left: 50%;
 45                 top: 50%;
 46                  460px;
 47                 height: 260px;
 48                 padding: 20px;
 49                 margin-left: -255px;
 50                 margin-top: -155px;
 51                 background: #CCEEDD;
 52                 border: 5px solid #0000FF;
 53             }
 54             #dialog button{
 55                 position: absolute;
 56                 right: 5px;
 57                 top: 5px;
 58                  20px;
 59                 height: 20px;
 60                 cursor: pointer;
 61             }
 62             #dialog .dialog-tt ul{
 63                 border-bottom: 2px solid #0000FF;
 64                 
 65             }
 66             #dialog .dialog-tt li{
 67                 float: left;
 68                 padding: 5px 10px;
 69                 cursor: pointer;
 70                 
 71             }
 72             #dialog .dialog-tt li.active{
 73                 background: #0000FF;
 74                 color: #fff;
 75             }
 76             #dialog .dialog-bd{
 77                 padding: 10px;
 78             }
 79             .f-cb{
 80                 zoom: 1;
 81             }
 82             .f-cb:after{
 83                 content: '';
 84                 display: block;
 85                 clear: both;
 86             }
 87             .f-dn{
 88                 display: none;
 89             }
 90             .f-db{
 91                 display: block;
 92             }
 93         </style>
 94         <script src="hl_tool.js" type="text/javascript" charset="utf-8"></script>
 95         <script type="text/javascript">
 96             window.onload = function(){
 97                 var oBox = hGetId('box');
 98                 var oDialog = hGetId('dialog');
 99                 var oBtnbox = hGetId('btnbox');
100                 var oBtnboxUl = hGetTagName('ul',btnbox)[0];
101                 var aBtnboxLi = hGetTagName('li',oBtnboxUl);
102                 var oClose = hGetTagName('button',oDialog)[0];
103                 var oBtnSeah = hGetId('btn-seah');
104                 var oIptSeah = hGetId('ipt-seah');
105                 var oBtnReplace = hGetId('btn-replace');
106                 var oIpt1Replace = hGetId('ipt1-replace');
107                 var oIpt2Replace = hGetId('ipt2-replace');
108                 var onOff = true;
109                 var sCon = hGetId('con').innerHTML;
110                 var aDialogTtLi = hGetTagName('li', hGetTagName('div',oDialog)[0]);
111                 var aDialogBdDiv = hGetTagName('div',hGetId('dialog-bd'));;
112                 
113                 hGetTagName('span',btnbox)[0].onclick = function(){
114                     
115                     if(onOff){
116                         hShow(oBtnboxUl);
117                     }else{
118                         hHide(oBtnboxUl);
119                     }
120                     onOff = !onOff;
121                 }
122                 
123                 function fnTab(_this,index){
124                     for (var i = 0; i < aDialogTtLi.length; i++) {
125                         aDialogTtLi[i].className = '';
126                         hHide(aDialogBdDiv[i]);
127                     }
128                     hGetId('con').innerHTML = sCon;
129                     _this.className = 'active';
130                     hShow(aDialogBdDiv[index]);
131                 }
132                 
133                 aBtnboxLi[0].onclick = function(){
134                     hShow(oDialog);
135                     fnTab(aDialogTtLi[0],0);
136                 }
137                 aBtnboxLi[1].onclick = function(){
138                     hShow(oDialog);
139                     fnTab(aDialogTtLi[1],1);
140                 }
141                 oClose.onclick = function(){
142                     hHide(oDialog);
143                 }
144                 
145                 for (var i = 0; i < aDialogTtLi.length; i++) {
146                     
147                     aDialogTtLi[i].index = i;
148                     
149                     aDialogTtLi[i].onclick = function(){
150                         fnTab(this,this.index);
151                     }
152                 }
153                 
154                 oBtnSeah.onclick = function(){
155                     if(oIptSeah.value == ''){
156                         alert('请输入要查找的内容');
157                         hGetId('con').innerHTML = sCon;
158                     }else{
159                         var ohReplace = hReplace(sCon , oIptSeah.value);
160                         if(ohReplace.flag === false){
161                             alert('找不到字符:=》'+ oIptSeah.value);
162                             hGetId('con').innerHTML = sCon;
163                         }else{
164                             hGetId('con').innerHTML = ohReplace.newStr;
165                             oIptSeah.value = '';
166                         }
167                     } 
168                 }
169                 
170                 oBtnReplace.onclick = function(){
171                     var str = hGetId('con').innerHTML;
172                     if(oIpt1Replace.value == ''){
173                         alert('请输入要替换的内容');
174                     }else{
175                         var ohReplace = hReplace(str , oIpt1Replace.value , oIpt2Replace.value, 1);
176                         if(ohReplace.flag === false){
177                             alert('找不到字符:=》'+ oIpt1Replace.value);
178                             hGetId('con').innerHTML = str;
179                             oIpt1Replace.value = oIpt2Replace.value = '';
180                         }else{
181                             if(oIpt2Replace.value == ''){
182                                 if (confirm("确定删除" + oIpt1Replace.value) ==true){
183                                       hGetId('con').innerHTML = ohReplace.newStr;
184                                     oIpt1Replace.value = oIpt2Replace.value = '';
185                                 }else{
186                                     oIpt1Replace.value = oIpt2Replace.value = '';
187                                     return false;
188                                 }
189                             }else{
190                                 hGetId('con').innerHTML = ohReplace.newStr;
191                                 oIpt1Replace.value = oIpt2Replace.value = '';
192                             }
193                         }
194                     }
195                 }
196             }
197         </script>
198     </head>
199     <body>
200         <div id="box">
201             <div id="con">
202                 妙味课堂是一支充满温馨并且极富人情味的IT培训团队；
203 2010～2011年，我们深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的 JavaScript 课程，
204 2011～2013年，我们精准研发出最新HTML5&CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中，
205 希望尽最大努力，将一种快乐愉悦的授课体验传递给我们的每一位学员。
206 在未来几年内，妙味课堂会逐渐发展成由上百位优秀讲师所带领的创业培训团队，
207 这些优秀讲师将是每个培训区域的独立负责人，他们是妙味课堂未来发展道路中最强大的力量。
208             </div>
209             <div id="btnbox">
210                 <span>展开</span>
211                 <ul >
212                     <li>查找</li>
213                     <li>替换</li>
214                 </ul>
215             </div>
216         </div>
217         <div id="dialog" class="f-dn">
218             <button>X</button>
219             <div class="dialog-tt">
220                 <ul class="f-cb">
221                     <li class="active">查找</li>
222                     <li>替换</li>
223                 </ul>
224             </div>
225             <div id="dialog-bd" class="dialog-bd">
226                 <div>
227                     <input type="text" name="" id="ipt-seah" value="" />
228                     <input type="button" name="" id="btn-seah" value="查找"  />
229                 </div>
230                 <div class="f-dn">
231                     <input type="text" name="" id="ipt1-replace" value="" />
232                     <input type="text" name="" id="ipt2-replace" value="" />
233                     <input type="button" name="" id="btn-replace" value="替换"  />
234                 </div>
235             </div>
236         </div>
237     </body>
238 </html>