<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

    p,ul,li{margin:0;padding:0;}

    li{list-style:none;}

    #mainConent{position:relative;top:0;left:0;}

    #mainConent p{width:400px;height:200px;border:10px solid #CCCCCC;background:#fff;}

    #mainConent ul{width:70px;position:absolute;top:0;left:430px;}

    #mainConent li{background:#ccc;margin-top:1px;text-align:center;color:#fff;}

    #mainConent li#active{background:#999999;}

    .default{display:none;}

    .showDefault{display:block;}

    #expainDiv{width:400px;height:100px;border:10px solid #FF33CC; position:relative;top:10px;left:0; display:none;}

    #expainDiv span{position:absolute;top:0;right:6px;font-size:24px;}

    #expainDiv ul{position:absolute;top:15px;left:10px;width:350px;height:20px;border-bottom:1px solid #FF0000;}

    #expainDiv li{position:absolute;width:50px;height:20px;text-align:center;}

    #find{left:10px;}

    #replace{left:61px;}

    #findDiv,#replaceDiv{position:absolute;left:10px;top:50px;}

    #findText,#replaceSrcText,#replaceDesText{border:1px solid #FF6600;}

    #textBg{background:#FFFF00;}

</style>

<script>

    window.onload = function(){

        var mainLi = document.getElementById('mainConent').getElementsByTagName('li');

        var expainDiv = document.getElementById('expainDiv');

        var findLi = document.getElementById('find');

        var replaceLi = document.getElementById('replace');

        var findText = document.getElementById('findText');

        var findInput = document.getElementById('findDiv').getElementsByTagName('input');

        var contentP = document.getElementsByTagName('p')[0];

        var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');

        var deleteSpan = document.getElementById('expainDiv').getElementsByTagName('span')[0];

        var onOff = true;

        mainLi[0].onclick = function(){

            if(onOff){

                mainLi[1].className = 'showDefault'; /* 直接用class替换*/

                mainLi[2].className = 'showDefault';

                mainLi[0].innerHTML = '闭合';

            }else{

                mainLi[1].className = 'default';

                mainLi[2].className = 'default';

                mainLi[0].innerHTML = '展开';

                expainDiv.style.display = 'none';

            }

            onOff = !onOff;

        };

         mainLi[1].onOff = 1;

         mainLi[2].onOff = 2;

         mainLi[1].onclick = mainLiFun;

         mainLi[2].onclick = mainLiFun;

         findLi.onOff = 1;

         replaceLi.onOff = 2;

         findLi.onclick = mainLiFun;

         replaceLi.onclick = mainLiFun;

         /*右上角的删除x*/

         deleteSpan.onclick = function(){

             expainDiv.style.display = 'none';

         };

        /*查找*/

        findInput[1].onclick =function(){

            var strfind = findInput[0].value;

            var contentStr = contentP.innerHTML;

            if(!strfind){

                alert("请输入查找的字符串！");

                return;

            }else if(contentStr.indexOf(strfind) == -1){

                alert("输入的信息找不到！");

                return;

            }

            contentP.innerHTML  =  contentStr.split(strfind).join('<span id="textBg">'+strfind+'</span>');

        };

        /*替换*/

        replaceInput[2].onclick = function(){

            var replaceSrc = replaceInput[0].value;

            var replaceDes = replaceInput[1].value;

            var contentStr = contentP.innerHTML;

            if(!replaceSrc){

                alert("请输入要被替换的文字！");

                return;

            }else if(contentStr.indexOf(replaceSrc) == -1){

                alert("输入有误，找不到 "+replaceSrc+" !");

                return;

            }else if(!replaceDes){

                if(!confirm("确定删除字符串 "+replaceSrc+" 吗？")) return;

            }

            contentP.innerHTML = contentStr.split(replaceSrc).join('<span id="textBg">'+replaceDes+'</span>');

        };

    };

    function mainLiFun(){

        var findLi = document.getElementById('find');

        var replaceLi = document.getElementById('replace');

        var findDiv = document.getElementById('findDiv');

        var replaceDiv = document.getElementById('replaceDiv');

        var findInput = document.getElementById('findDiv').getElementsByTagName('input');

        var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');

        if(this.onOff ==1){

            hiddenExpainDivLiFun(replaceLi);

            expainDivLiFun(findLi);

            replaceDiv.style.display = 'none';

            findDiv.style.display = 'block';

            findInput[0].value = "";

        }else if(this.onOff ==2){

            hiddenExpainDivLiFun(findLi);

            expainDivLiFun(replaceLi);

            findDiv.style.display = 'none';

             replaceDiv.style.display = 'block';

            replaceInput[0].value = "";

            replaceInput[1].value = "";

        }

    }

    function expainDivLiFun(id){

        expainDiv.style.display = 'block';

        findDiv.style.display = 'block';

        id.style.background = '#FF0000';

        id.style.color = '#fff';

    }

    function hiddenExpainDivLiFun(id){

        expainDiv.style.display = 'block';

        findDiv.style.display = 'block';

        id.style.background = '';

        id.style.color = '#000';

    }

</script>

</head>

<body>

    <div id="mainConent">

        <p>4消息类型包括3种1由模块发送的动作类 显示类命令执行消息配置变更任务会接受到命令字符串，

        监听任务会将字符串放到延迟发送缓冲区中，目的是防止产生大量的trap。在短时间内相同的动作，只发送一次

2有cfg模块发送的配置变更消息配置变更任务会主动与时上一下保存的配置进行比较找出a添加，删除和变更的命令，将上述命令字符通过命令转换层转换成可执行的命令。放入发送队列。3命令发送消息，每2秒钟执行，目的是将发送队列中的消息，组成trap 发送给告警模块。

        </p>

        <ul>

            <li id="active">展开</li>

            <li class ="default">查找</li>

            <li class="default">替换</li>

        </ul>

    </div>

    <div id="expainDiv">

        <span>x</span>

        <ul>

            <li id="find">查找</li>

            <li id="replace">替换</li>

        </ul>

        <div id="findDiv">

            <input type="text" id="findText" />

            <input type="button" value="查找"/>

        </div>

        <div id="replaceDiv">

            <input type="text" id="replaceSrcText" />

            <input type="text" id="replaceDesText" />

            <input type="button" value="替换"/>

        </div>

    </div>

</body>

</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. CAD 卸载工具，完美彻底卸载清除干净cad各种残留注册表和文件

    CAD提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装CAD失败提示CAD安装未完成,某些产品无法安装,也有时候想重新安装CAD的时候会出现本电脑windows ...

  2. Tmux 速成教程：技巧和调整

    本文转自:http://blog.jobbole.com/87584/ 简介 有些开发者经常要使用终端控制台工作,导致最终打开了过多的标签页.如果你也是他们当中的一员,或者你正在实践结对编程,那么我推 ...

  3. Nginx 原理和架构

    Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器.Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名Nginx 里 ...

  4. Hibernate之cascade属性和inverse属性

    1.cascade属性 cascade属性的作用是描述关联对象进行操作时的级联特性,只有涉及关系的元素才有cascade属性.具有cascade属性的标记包括<many-to-one/>. ...

  5. 题解：BZOJ 1009 HNOI2008 GT考试 KMP + 矩阵

    原题描述: 阿申准备报名参加GT考试,准考证号为N位数 X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0<=Ai&a ...

  6. 吴裕雄--天生自然KITTEN编程：青蛙答题过河

  7. RROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2

    RROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2 ...

  8. 【Hardware】i386、x86和x64的故事

    (1)x86的由来 x86架构首度出现在1978年推出的Intel 8086中央处理器,它是从Intel 8008处理器中发展而来的,而8008则是发展自Intel 4004的.在8086之后,Int ...

  9. 「NOIP 2017」列队

    题目大意:给定一个 $n times m$ 的方阵,初始时第 $i$ 行第 $j$ 列的人的编号为 $(i-1) times m + j$,$q$ 次给出 $x,y$,让第 $x$ 行 $y$ 列的人 ...

  10. The Integers and the Real Numbers

    以上我們談了一些 邏輯的基礎,接下來我們會談一些 數學的基礎,也就是整數與實數系統.其實我們已經用了很多,非正式地,接下來我們會正式地討論他們. 要 建構 實數系統的一個方法就是利用公理跟集合論來建構 ...