js 实现字符串的查找和替换

<!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 实现字符串的查找和替换的更多相关文章

JS实现文本中查找并替换字符
JS实现文本中查找并替换字符效果图: 代码如下,复制即可使用: <!DOCTYPE html><html> <head> <style type=" ...
sh_17_字符串的查找和替换
sh_17_字符串的查找和替换 hello_str = "hello world" # 1. 判断是否以指定字符串开始 print(hello_str.startswith(&qu ...
C#入门篇6-11：字符串操作查找与替换
#region 查找与替换 public class C4 { //查找 public static void StrFind() { //目标字符串 string str1 = "~awe ...
[LeetCode] Find And Replace in String 在字符串中查找和替换
To some string S, we will perform some replacement operations that replace groups of letters with ne ...
实现字符串的查找和替换分类： c/c++ 2014-10-09 22:33 469人阅读评论(0) 收藏
在字符串中查找目标字符串并将其替换为指定字符串,返回替换的次数.接口为 int find_str_replace(char *&str,const char *find_str,const c ...
vim /vi中对字符串的查找并替换
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian ...
js中字符串和正则相关的方法
正则表达式对象常用方法 test() 检索字符串中指定的值.返回 true 或 false. var str="Embrace You" var r1=/you/i.test(st ...
js中字符串全部替换
废话不多说,直接发结果在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm ...
JS 正则查找与替换
JS正则查找与替换一.前提/背景今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...

随机推荐

mongodb use where and custom function to query mongodb存储过程
function name regexObjSubObjKey function code function(proto,value) { var match=false; var reg = new ...
Java IO: FileOutputStream
原文链接作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) FileOutputStream可以往文件里写入字节流,它是OutputStream的子类, ...
iOS(Swift)学习笔记之SnapKit+自定义UI组件
本文为原创文章,转载请标明出处 1. 通过CocoaPods安装SnapKit platform :ios, '10.0' target '<Your Target Name>' do u ...
图的DFS。。类似树的DFS
Depth-First Search (DFS) Depth-first search (DFS) is an algorithm for traversing or searching tree o ...
吴裕雄--天生自然 R语言开发学习：回归
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
python基础之文件操作1
文件操作:os.mknod("test.txt") 创建空文件fp = open("test.txt",w) 直接打开一个文件,如果文件不 ...
VMware虚拟机克隆CentOS6.5后修改网卡
在学习zk伪分布式集群对的时候,第一次注意到克隆虚拟机后修改eth的ip地址,发现ip不是自己修改的ip,进而在询问下发现,当我们第一次登陆查看我们克隆的虚拟机ip时:我们看到的ip不是et ...
录音文件lame转换MP3相关配置
文件下载整个功能完成了,那么对应的文件上传也跑不了.So~ Look here~ 业务需求是录制音频然后上传到七牛并且Android可以读. 与安卓沟通了一下统一了mp3格式,大小质量都不错.由于AV ...
实现子数组和绝对值差最小 - Objective-C
类似于背包问题,前提条件是数组全是正整数和0,先求和Sum,再从子数组中找出接近Sum/2的子数组 @interface TempState : NSObject @property (nonatom ...
css之制作三角形
箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...

js 实现字符串的查找和替换

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

随机推荐

热门专题