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

最新推荐文章于 2020-08-28 17:14:12 发布
weixin_30848775
最新推荐文章于 2020-08-28 17:14:12 发布
阅读量146
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/moon-yyl/p/8884322.html
版权
<!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>