<!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. verilog求倒数-ROM实现方法

    采用线性逼近法结合32段线性查找表的方式来实现1/z的计算. 首先将1/32-1/64的定点化数据存放到ROM中,ROM中存放的是扩大了2^20 次方的数字四舍五入后的整数部分.n值越大,精度越大,误 ...

  2. h指数|JCR|ORCID|CCC|Research ID|BKCI|

    h指数有如下缺点: 年龄大且平庸的学者比杰出的青年学者的h-index大.学科之间h指数的评价标准不同.有时候,审稿人暗示作者引用自己文章. 再此处可找到相关信息: JCR上可以查询到影响因子,以下是 ...

  3. IOS下的safari下localStorage不起作用的问题

    我们的一个小应用,使用百度地图API获取到用户的坐标之后用localStorage做了下缓存,测试上线之后有运营同学反馈页面数据拉取不到, 测试的时候没有发现问题,而且2台相同的iphone一台可以一 ...

  4. 解决android 无法打开 DDMS 中的data目录

    把上面操作一遍就可以了,如果还是不行你可以检查下 su 是不是输入错误了.

  5. 吴裕雄--天生自然KITTEN编程：躲迷藏

  6. 批量修改datafram中某一列

    如要对df中列名为“values”的值做修改,大于等于50改为1,小于50改为0,可用apply函数来实现: def fun(x): if x >= 50: return 1 else: ret ...

  7. HEXO+Git+Github+域名搭建个人博客

    搭建个人博客可以分为以下五个部分 一.搭建本地环境(个人为Win10) 1.安装Git,下载地址:点击 下载后,按提示进行安装即可,作用是:把本地的内容提交到github上去 注意:官网下载速度不是很 ...

  8. Angular总结

    angular关键核心点进行总结 1 2 angular中有很多知识点需要学习,学习成本是很大的,我通过平常开发中把一些 很重要知识点总结下来,不管是以后拿来用,或者跳槽面试需要,我都感觉是很有帮助的 ...

  9. 「NOIP 2017」列队

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

  10. 安卓权威编程指南 挑战练习：实现高效RecyclerView刷新

    Adapter的notifyDataSetChanged方法会通知RecyclerView刷新全部的可见列表项. 在CriminalIntent应用里,这个方法不够高效,我们知道,返回CrimeLis ...