依赖 工具函数库

  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.                  width: 500px;
  17.                  padding: 10px;
  18.                  background: #eee;
  19.              }
  20.              #btnbox{
  21.                  position: absolute;
  22.                  right: -60px;
  23.                  top: 0;
  24.                  width: 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.                  width: 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.                  width: 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>

JS查找和替换字符串列子的更多相关文章

  1. JS 利用正则表达式替换字符串

    JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...

  2. 在LoadRunner中查找和替换字符串

    参考<Search & Replace function for LoadRunner>: http://ptfrontline.wordpress.com/2009/03/13/ ...

  3. Word 查找和替换字符串方法

    因为项目需要通过word模板替换字符串 ,来让用户下载word, 就在网上找了找word查找替换字符串的库或方法,基本上不是收费,就是无实现,或者方法局限性太大 .docx 是通过xml来存储文字和其 ...

  4. Shell：sed用法 - 查找并替换字符串

    原文链接 语法 sed 's/serach_str/replace_str/g' file_path 在某个文件中查找所有的serach_str并替换为replace_str 参数 描述 serach ...

  5. 查找并替换字符串 Find And Replace in String

    2018-07-29 17:08:15 问题描述: 问题求解: 字符串替换的问题有个技巧就是从右向左进行替换,这样的话,左边的index就不需要考虑变动了. public String findRep ...

  6. JS使用replace替换字符串中的某段或某个字符

    函数的介绍参考:http://www.w3school.com.cn/jsref/jsref_replace.asp 下列代码将Hello World!中的World替换为Jim <html&g ...

  7. js截取+全部替换+字符串

    //将关键字标志显示到页面中 function showKeyWord(showStr) { var keyword = $("#keyword").val();//页面中的关键字 ...

  8. js写的替换字符串（相当于js操作字符串的一个练习）

    1.达到的效果 1./main_1.do,/left_1.do -> main:1,left:1 2./tbl_type/v_list_{id}.do -> tbl_type:list:{ ...

  9. js replace 如何替换字符串中的最后一个匹配项

    1.正则表达时,贪婪模式,.*会一直匹配到最后一个 // 验证 let str = "123[空]345[空]789[空]0"; let res = str.replace(/(. ...

随机推荐

  1. Balancing Symbols

    symbols匹配问题 #include<iostream> #include<string> using namespace std; struct Node { char ...

  2. [转]phpcms 判断用户登录代码

    <!-- 用户登录开始 --> <?php //读取用户信息 $ypzy_userid = param::get_cookie('_userid'); if(!empty($ypzy ...

  3. WEBROOT根目录 <%=request.getContextPath()%>

    WEBROOT根目录 <%=request.getContextPath()%> == ${pageContext.request.contextPath}

  4. PHP xdebug的安装

    xdebug实际上就是PHP的一个第三方扩展 安装xdebug步骤和添加一个PHP扩展一样 linux:去xdebug官网下载对应版本的源码,然后像编译其他linux扩展一样,详解我的一篇关于Linu ...

  5. 二分 Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D

    http://codeforces.com/contest/722/problem/D 题目大意:给你一个没有重复元素的Y集合,再给你一个没有重复元素X集合,X集合有如下操作 ①挑选某个元素*2 ②某 ...

  6. Linq List<String>

    List<string> _year = new List<string>() { "一月", "二月", "三月" ...

  7. iptables查看、添加、删除规则

    1.查看iptables -nvL –line-number -L 查看当前表的所有规则,默认查看的是filter表,如果要查看NAT表,可以加上-t NAT参数-n 不对ip地址进行反查,加上这个参 ...

  8. Mybatis 一对一，一对多，多对一，多对多的理解

    First (一对一) 首先我来说下一对一的理解,就是一个班主任只属于一个班级,一个班级也只能有一个班主任.好吧这就是对于一对一的理解 怎么来实现呢? 这里我介绍了两种方式: 一种是:使用嵌套结果映射 ...

  9. log4j打印出线程号和方法名

    先参考实现配置,如果想要更加详细的配置,可加上更多参数: log4j.rootLogger = INFO,FILE,CONSOLE log4j.appender.FILE.Threshold=INFO ...

  10. linux的学习系列 10---vi

    Linux下的文本编辑器有很多种,vi 是最常用的,也是各版本Linux的标配.注意,vi 仅仅是一个文本编辑器,可以给字符着色,可以自动补全,但是不像 Windows 下的 word 有排版功能. ...