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 ...

随机推荐

整合SSM遇到的错误,数据库连接失败问题集合
Could not get JDBC Connection; nested exception is java.sql.SQLException: Connections could not be a ...
最优化算法——常见优化算法分类及总结
之前做特征选择,实现过基于群智能算法进行最优化的搜索,看过一些群智能优化算法的论文,在此做一下总结. 在生活或者工作中存在各种各样的最优化问题,比如每个企业和个人都要考虑的一个问题"在一定成 ...
初级vector
标准库vector类型 #include<vector> using std::vector; vector为一个类模板. vector的初始化 vector<T> v1; v ...
[LC] 230. Kth Smallest Element in a BST
Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...
利用Load命令将本地文本里面的数据导入到MySQL数据库
摘要:在使用MySQL是我们可能会遇到要向我们的表中插入大量的数据如果都使用以下的语句在命令行输入有点不太切实际,幸好MySQL为我们提供了LOAD命令可以批量的从本地文件向MySQL表中导入数据! ...
Catalan数应用问题
python字符串复制的几种方法
>>> list1 = [1,2] >>> id(list1) 50081032 >>> list2 = list1.copy() >> ...
ES6中 const 关键字
const声明一个只读的常量.一旦声明,常量的值就不能改变. 定义后可以使用但不能修改但是,const 定义的对象可能与我们想象的不太一样定义了对象b ,我们可以在b上添加修改属性,再看一个列子 ...
【基础篇】hexo博客搭建教程
[基础篇]搭建hexo博客(一) 作者:Huanhao bilibili:Mrhuanhao 前言你是否想拥有属于自己的博客?你是否无奈与自己不会写网站而烦恼? 不要担心,本系列教程将会实现你白嫖的 ...
marquee用到的属性
一.marquee标签的几个重要属性: 1.direction:滚动方向(包括4个值:up.down.left.right) 说明:up:从下向上滚动:down:从上向下滚动:left:从右向左滚 ...

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

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

随机推荐

热门专题