<!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. python多进程之IPC机制以及生产者消费者模型

    1.进程间通信(IPC机制) 第一种:管道 import subprocessres=subprocess.Popen('dir',shell=True, stdout=subprocess.PIPE ...

  2. [LC] 232. Implement Queue using Stacks

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  3. 转-Zeus资源调度系统介绍

    摘要: 本文主要概述阿里巴巴Zeus资源调度系统的背景和实现思路. 本文主线:问题.解决方案.依赖基础知识.工程实践.目标.经验分享.立足企业真实问题.常规解决策略,引出依赖的容器技术.实践方案,所有 ...

  4. Yii2创建管理员登录

    1. 创建管理员表 进入项目根目录,在根目录执行命令: 1 $ ./yii migrate 2. 创建管理的控制器 1 $ cd console/controllers/ 编写代码如下: 123456 ...

  5. POJ 3249 Test for Job(拓扑排序+dp优化空间)

    Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...

  6. Swift iOS实现把PCM语音转成MP3格式

    最近折腾了swift的语音录制识别和转码,这块还是比较坑的,由于语音识别的准确度实测大概也就80%左右,所以还是需要上传录音文件啊.首先是用讯飞语音SDK实现语音录制和识别(语音听写),第一个坑是讯飞 ...

  7. 为何银行愿为收购supercell做无权追索融资？

    无追索权融资又称纯粹的项目融资,是指贷款人对项目主办人没有任何追索权的项目融资.简单来说,这是一种项目失败,也无法追尝的承诺,一般发生在石油.天然气.煤炭.铜.铝等矿产资源开发等相对较为保值的项目融资 ...

  8. 达拉草201771010105《面向对象程序设计（java）》第十六周学习总结

    达拉草201771010105<面向对象程序设计(java)>第十六周学习总结 第一部分:理论知识 1.程序与进程的概念: (1)程序是一段静态的代码,它是应用程序执行的蓝 本. (2)进 ...

  9. CSS 加载动画

    CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...

  10. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...