1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style>
  7.     p,ul,li{margin:0;padding:0;}
  8.     li{list-style:none;}
  9.     #mainConent{position:relative;top:0;left:0;}
  10.     #mainConent p{width:400px;height:200px;border:10px solid #CCCCCC;background:#fff;}
  11.     #mainConent ul{width:70px;position:absolute;top:0;left:430px;}
  12.     #mainConent li{background:#ccc;margin-top:1px;text-align:center;color:#fff;}
  13.     #mainConent li#active{background:#999999;}
  14.     .default{display:none;}
  15.     .showDefault{display:block;}
  16.  
  17.     #expainDiv{width:400px;height:100px;border:10px solid #FF33CC; position:relative;top:10px;left:0; display:none;}
  18.     #expainDiv span{position:absolute;top:0;right:6px;font-size:24px;}
  19.     #expainDiv ul{position:absolute;top:15px;left:10px;width:350px;height:20px;border-bottom:1px solid #FF0000;}
  20.     #expainDiv li{position:absolute;width:50px;height:20px;text-align:center;}
  21.     #find{left:10px;}
  22.     #replace{left:61px;}
  23.     #findDiv,#replaceDiv{position:absolute;left:10px;top:50px;}
  24.     #findText,#replaceSrcText,#replaceDesText{border:1px solid #FF6600;}
  25.     #textBg{background:#FFFF00;}
  26.  
  27. </style>
  28. <script>
  29.     window.onload = function(){
  30.         var mainLi = document.getElementById('mainConent').getElementsByTagName('li');
  31.         var expainDiv = document.getElementById('expainDiv');
  32.         var findLi = document.getElementById('find');
  33.         var replaceLi = document.getElementById('replace');
  34.         var findText = document.getElementById('findText');
  35.         var findInput = document.getElementById('findDiv').getElementsByTagName('input');
  36.         var contentP = document.getElementsByTagName('p')[0];
  37.         var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');
  38.         var deleteSpan = document.getElementById('expainDiv').getElementsByTagName('span')[0];
  39.  
  40.         var onOff = true;
  41.  
  42.         mainLi[0].onclick = function(){
  43.             if(onOff){
  44.                 mainLi[1].className = 'showDefault'; /* 直接用class替换*/
  45.                 mainLi[2].className = 'showDefault';
  46.                 mainLi[0].innerHTML = '闭合';
  47.             }else{
  48.                 mainLi[1].className = 'default';
  49.                 mainLi[2].className = 'default';
  50.                 mainLi[0].innerHTML = '展开';
  51.                 expainDiv.style.display = 'none';
  52.             }
  53.             onOff = !onOff;
  54.         };
  55.          mainLi[1].onOff = 1;
  56.          mainLi[2].onOff = 2;
  57.          mainLi[1].onclick = mainLiFun;
  58.          mainLi[2].onclick = mainLiFun;
  59.          findLi.onOff = 1;
  60.          replaceLi.onOff = 2;
  61.          findLi.onclick = mainLiFun;
  62.          replaceLi.onclick = mainLiFun;
  63.          /*右上角的删除x*/
  64.          deleteSpan.onclick = function(){
  65.              expainDiv.style.display = 'none';
  66.          };
  67.  
  68.         /*查找*/
  69.         findInput[1].onclick =function(){
  70.             var strfind = findInput[0].value;
  71.             var contentStr = contentP.innerHTML;
  72.             if(!strfind){
  73.                 alert("请输入查找的字符串！");
  74.                 return;
  75.             }else if(contentStr.indexOf(strfind) == -1){
  76.                 alert("输入的信息找不到！");
  77.                 return;
  78.             }
  79.             contentP.innerHTML  =  contentStr.split(strfind).join('<span id="textBg">'+strfind+'</span>');
  80.         };
  81.  
  82.         /*替换*/
  83.         replaceInput[2].onclick = function(){
  84.             var replaceSrc = replaceInput[0].value;
  85.             var replaceDes = replaceInput[1].value;
  86.             var contentStr = contentP.innerHTML;
  87.             if(!replaceSrc){
  88.                 alert("请输入要被替换的文字！");
  89.                 return;
  90.             }else if(contentStr.indexOf(replaceSrc) == -1){
  91.                 alert("输入有误，找不到 "+replaceSrc+" !");
  92.                 return;
  93.             }else if(!replaceDes){
  94.                 if(!confirm("确定删除字符串 "+replaceSrc+" 吗？")) return;
  95.             }
  96.             contentP.innerHTML = contentStr.split(replaceSrc).join('<span id="textBg">'+replaceDes+'</span>');
  97.         };
  98.     };
  99.  
  100.     function mainLiFun(){
  101.         var findLi = document.getElementById('find');
  102.         var replaceLi = document.getElementById('replace');
  103.         var findDiv = document.getElementById('findDiv');
  104.         var replaceDiv = document.getElementById('replaceDiv');
  105.         var findInput = document.getElementById('findDiv').getElementsByTagName('input');
  106.         var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');
  107.  
  108.         if(this.onOff ==1){
  109.             hiddenExpainDivLiFun(replaceLi);
  110.             expainDivLiFun(findLi);
  111.             replaceDiv.style.display = 'none';
  112.             findDiv.style.display = 'block';
  113.             findInput[0].value = "";
  114.         }else if(this.onOff ==2){
  115.             hiddenExpainDivLiFun(findLi);
  116.             expainDivLiFun(replaceLi);
  117.             findDiv.style.display = 'none';
  118.              replaceDiv.style.display = 'block';
  119.             replaceInput[0].value = "";
  120.             replaceInput[1].value = "";
  121.         }
  122.     }
  123.  
  124.     function expainDivLiFun(id){
  125.         expainDiv.style.display = 'block';
  126.         findDiv.style.display = 'block';
  127.         id.style.background = '#FF0000';
  128.         id.style.color = '#fff';
  129.     }
  130.  
  131.     function hiddenExpainDivLiFun(id){
  132.         expainDiv.style.display = 'block';
  133.         findDiv.style.display = 'block';
  134.         id.style.background = '';
  135.         id.style.color = '#000';
  136.     }
  137.  
  138. </script>
  139. </head>
  140. <body>
  141.     <div id="mainConent">
  142.         <p>4消息类型包括3种1由模块发送的动作类 显示类命令执行消息配置变更任务会接受到命令字符串，
  143.         监听任务会将字符串放到延迟发送缓冲区中，目的是防止产生大量的trap。在短时间内相同的动作，只发送一次
  144. 2有cfg模块发送的配置变更消息配置变更任务会主动与时上一下保存的配置进行比较找出a添加，删除和变更的命令，将上述命令字符通过命令转换层转换成可执行的命令。放入发送队列。3命令发送消息，每2秒钟执行，目的是将发送队列中的消息，组成trap 发送给告警模块。
  145.         </p>
  146.         <ul>
  147.             <li id="active">展开</li>
  148.             <li class ="default">查找</li>
  149.             <li class="default">替换</li>
  150.         </ul>
  151.     </div>
  152.     <div id="expainDiv">
  153.         <span>x</span>
  154.         <ul>
  155.             <li id="find">查找</li>
  156.             <li id="replace">替换</li>
  157.         </ul>
  158.         <div id="findDiv">
  159.             <input type="text" id="findText" />
  160.             <input type="button" value="查找"/>
  161.         </div>
  162.         <div id="replaceDiv">
  163.             <input type="text" id="replaceSrcText" />
  164.             <input type="text" id="replaceDesText" />
  165.             <input type="button" value="替换"/>
  166.         </div>
  167.     </div>
  168. </body>
  169. </html>

js 实现字符串的查找和替换的更多相关文章

  1. JS实现文本中查找并替换字符

    JS实现文本中查找并替换字符 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html> <head> <style type=" ...

  2. sh_17_字符串的查找和替换

    sh_17_字符串的查找和替换 hello_str = "hello world" # 1. 判断是否以指定字符串开始 print(hello_str.startswith(&qu ...

  3. C#入门篇6-11：字符串操作 查找与替换

    #region 查找与替换 public class C4 { //查找 public static void StrFind() { //目标字符串 string str1 = "~awe ...

  4. [LeetCode] Find And Replace in String 在字符串中查找和替换

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  5. 实现字符串的查找和替换 分类： c/c++ 2014-10-09 22:33 469人阅读 评论(0) 收藏

    在字符串中查找目标字符串并将其替换为指定字符串,返回替换的次数.接口为 int find_str_replace(char *&str,const char *find_str,const c ...

  6. vim /vi中对字符串的查找并替换

    vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询.    :s/vivian/sky/ 替换当前行第一个 vivian ...

  7. js中字符串和正则相关的方法

    正则表达式对象常用方法 test() 检索字符串中指定的值.返回 true 或 false. var str="Embrace You" var r1=/you/i.test(st ...

  8. js中字符串全部替换

    废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm ...

  9. JS 正则查找与替换

    JS正则查找与替换 一.前提/背景 今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...

随机推荐

  1. 【网上转载搜罗】本博客花里胡哨（划掉）效果js代码

    <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;poin ...

  2. caffe之android移植

    获取Android手机CPU类型 ARM.ARMV7.NEON:http://blog.csdn.net/mengweiqi33/article/details/22796619 android nd ...

  3. Hello 2015

    "Yeah It's on. " 前言 Hux 的 Blog 就这么开通了. 跳过废话,直接看技术实现 2015 年,Hux 总算有个地方可以好好写点东西了. 作为一个程序员, B ...

  4. 吴裕雄--天生自然python编程：pycharm常用快捷键问题

    最近在使用pycharm的时候发现不能正常使用ctrl+c/v进行复制粘贴,也无法使用tab键对大段代码进行整体缩进.后来发现是因为安装了vim插件的问题,在setting里找到vim插件,取消勾选即 ...

  5. java 实体类中日期格式转换

    @JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss&quo ...

  6. <SCOI2009>粉刷匠の思路

    emm.dp真的是写不来啊难过 不边写边注释我就挂了 #include<cstdio> #include<cstring> #include<iostream> # ...

  7. Appium移动自动化测试实例-基于python

    一.环境搭建 安装Android 环境变量.SDK.Android API.ADT等. 步骤1  安装SDK:下载地址为https://pan.baidu.com/s/1mi6PT9m.如提示错误:' ...

  8. 一句话看懂redux

    一个是存储在 store 里面的 state,另一个是每一次调用 dispatch 所传进来的 action.reducer 的作用,就是对 dispatch 传进来的 action 进行处理,并将结 ...

  9. SpringMVC之请求响应(上)

    1.OutPutController package com.tz.controller; import java.util.Map; import org.springframework.stere ...

  10. RxJava学习笔记(操作符)

    前言 上一篇文章介绍了RxJava的基础知识和简单实现,篇幅已经比较多了,所以把操作符(Operators)相关的内容放在这一篇.有了上一篇文章的基础,相信会比较容易理解操作符相关的内容了. 操作符( ...