js实现字符串的查和替换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>
var mainLi = ElementById('mainConent').getElementsByTagName('li');
var expainDiv = ElementById('expainDiv');
var findLi = ElementById('find');
var replaceLi = ElementById('replace');
var findText = ElementById('findText');
var findInput = ElementById('findDiv').getElementsByTagName('input');
var contentP = ElementsByTagName('p')[0];
var replaceInput = ElementById('replaceDiv').getElementsByTagName('input');
var deleteSpan = ElementById('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;
/*右上⾓的删除x*/
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){
js在字符串中添加字符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 = ElementById('find');
var replaceLi = ElementById('replace');
var findDiv = ElementById('findDiv');
var replaceDiv = ElementById('replaceDiv');
var findInput = ElementById('findDiv').getElementsByTagName('input');
var replaceInput = ElementById('replaceDiv').getElementsByTagName('input');
Off ==1){
hiddenExpainDivLiFun(replaceLi);
expainDivLiFun(findLi);
replaceDiv.style.display = 'none';
findDiv.style.display = 'block';
findInput[0].value = "";
}else Off ==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';
lor = '#fff';
}
function hiddenExpainDivLiFun(id){
expainDiv.style.display = 'block';
findDiv.style.display = 'block';
id.style.background = '';
lor = '#000';
}
</script>
</head>
<body>
<div id="mainConent">
<p>4消息类型包括3种1由模块发送的动作类显⽰类命令执⾏消息配置变更任务会接受到命令字符串，
监听任务会将字符串放到延迟发送缓冲区中，⽬的是防⽌产⽣⼤量的trap。在短时间内相同的动作，只发送⼀次
2有cfg模块发送的配置变更消息配置变更任务会主动与时上⼀下保存的配置进⾏⽐较出a添加，删除和变更的命令，将上述命令字符通过命令转换层转换成可执⾏的命令。放⼊发送队列。3命令发送消息，每2秒钟执⾏，⽬的是将发送队列中的消息，</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>