查找、替换
<!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=utf-8" />
<title>查找、替换</title>
<style>
p{float:left;}
#main{width:600px;border:8px solid #F66;background:#C4FCFF;padding:15px;font-size:20px;font-weight:bolder;text-indent:2em;line-height:30px;margin:0;}
.list{width:70px;height:30px;text-align:center;line-height:30px;font-weight:bolder;margin-left:10px;margin-bottom:4px;background:#CCC;color:#FFF;}
.list1{margin:0;width:50px;text-align:center;margin-left:4px;margin-top:4px;font-weight:bolder;background:#CCC;}
#div0{float:left;}
#div1,#div2,#div{display:none;}
#div{ clear:both;height:50px;}
input{margin:0;margin-top:4px;margin-left:4px;}
span{background:#CF3;}
</style>
<script>
window.onload=function(){
var aP=document.getElementsByTagName(‘p‘);
var aDiv=document.getElementsByTagName(‘div‘);
var aInp=document.getElementsByTagName(‘input‘);
var oA=document.getElementsByTagName(‘a‘)[0];
var oLabel=document.getElementsByTagName(‘label‘)[0];
var str=oLabel.innerHTML;
var onOff = true;
oA.onclick = function () {
if ( onOff ) {
oLabel.innerHTML = str.substring(0, 65);
oA.innerHTML = ‘>>展开‘;
} else {
oLabel.innerHTML = str;
oA.innerHTML = ‘>>收缩‘;
}
onOff = !onOff;
};
aDiv[1].onclick=function(){
this.style.background=‘#666‘;
this.style.color=‘#000‘;
aDiv[2].style.display=‘block‘;
aDiv[3].style.display=‘block‘;
};
fnBackground(aDiv[2]);
fnBackground(aDiv[3]);
fnBackground(aP[1]);
fnBackground(aP[2]);
function fnBackground(Div){
Div.onmouseover=function(){
this.style.background=‘#999‘;
}
Div.onmouseout=function(){
this.style.background=‘‘;
}
};
fnC(aP[1]);
fnC(aDiv[2]);
function fnC(aP1){
aP1.onclick=function(){
aDiv[4].style.display=‘block‘;
aInp[1].style.display=‘none‘;
aInp[2].onclick=function(){
var str=aInp[0].value;
if(str===‘‘){
alert(‘请输入要查找的内容！‘);
return;
}else if(aP[0].innerHTML.split(str)===aP[0].innerHTML.split()){
alert(‘找不到要查找的内容！！‘);
}else{
aP[0].innerHTML=aP[0].innerHTML.split(str).join(‘<span>‘+str+‘</span>‘);
}
};
};
}
fnT(aP[2]);
fnT(aDiv[3]);
function fnT(aP2){
aP2.onclick=function(){
aDiv[4].style.display=‘block‘;
aInp[1].style.display=‘‘;
aInp[2].onclick=function(){
var str=aInp[0].value;
var newStr=aInp[1].value;
if(str===‘‘){
alert(‘请输入要替换的内容！‘);
return;
}else{
aP[0].innerHTML=aP[0].innerHTML.split(str).join(‘<span>‘+newStr+‘</span>‘);
}
};
};
}
};
</script>
</head>
<body>
<p id=‘main‘><label>皓月当空、星光灿烂的夜里：我会妙曼在月光下，那月儿就是他的心，我在他心中荡漾，那星星就是他的眼，我在他眼下漫舞。温润潮湿多雨的季节：我会穿过雾雨蒙蒙的小径，轻轻地叩击惦记心扉，透过粼粼的水面，让欲望浸成了一汪盈盈的泪水。丹桂飘香的时节：我会将惦记紧紧地贴近心窝，枕着他的名字，在以往的记忆中精心的翻找；苦觅哪怕一丝的温暖，续我一晚的梦幻</label>.....<a href="javascript:;">>>收缩</a></p>
<div id="div0">
<div class="list">展开</div>
<div class="list" id="div1">查找</div>
<div class="list" id="div2">替换</div>
</div>
<div id="div">
<p class="list1">查找</p><p class="list1">替换</p>
<input type="text" />
<input type="text" />
<input type="button" value="确定" />
</div>
</body>
</html>
从学js开始到目前为止，自己写的质量最高的代码（纪念一下）（练习）
原文：http://www.cnblogs.com/webdjk/p/5330647.html