简单的网页文章内容文字查找替换js代码,原生js实现,类似于一些编程工具的查找替换功能。
js代码
<script>
var oZhanKai = document.getElementById('zhankai');
var oP = document.getElementsByTagName('p')[0];
var oZkA = oZhanKai.getElementsByTagName('a')[0];
var oZkUl = oZhanKai.getElementsByTagName('ul')[0];
var oZkAl = oZkUl.getElementsByTagName('li');
var oTiHuan = document.getElementById('tihuan');
var oTiDiv = oTiHuan.getElementsByTagName('div');
var oTiA = oTiHuan.getElementsByTagName('a')[0];
var oTiUl = oTiHuan.getElementsByTagName('ul')[0];
var oTiLi = oTiUl.getElementsByTagName('li');
var aInp1 = oTiDiv[0].getElementsByTagName('input');
var aInp2 = oTiDiv[1].getElementsByTagName('input');
var onOff = true;
var str = oP.innerHTML
oZkA.onclick = function(){
if( onOff ){
oZkUl.style.display = 'block';
onOff = false;
}else{
oZkUl.style.display = 'none'
onOff = true;
}
}
for( var i=0;i<oZkAl.length;i++ ){
oZkAl[i].index = i;
oZkAl[i].onclick = function(){
for( var i=0;i<oZkAl.length;i++ ){
oTiDiv[i].style.display = 'none'
oTiLi[i].className = ''
oZkAl[i].className = ''
}
oTiHuan.style.display = 'block'
oTiDiv[this.index].style.display = 'block'
oTiLi[this.index].className = 'cur'
this.className = 'cur'
}
}
for( var i=0;i<oTiLi.length;i++ ){
oTiLi[i].index = i;
oTiLi[i].onclick = function(){
for( var i=0;i<oTiLi.length;i++ ){
oTiDiv[i].style.display = 'none'
oTiLi[i].className = ''
}
oTiDiv[this.index].style.display = 'block'
this.className = 'cur'
aInp1[0].value = ''
aInp2[0].value = ''
aInp2[1].value = ''
}
}
oTiA.onclick = function(){
oTiHuan.style.display = 'none'
}
aInp1[1].onclick = function(){
var aInp1value = aInp1[0].value;
if( oP.innerHTML.indexOf(aInp1[0].value) == -1 ){
alert('对不起,您输入的内容查找不到')
}else if( aInp1[0].value === '' ){
alert('请输入您要查找的内容')
}else{
oP.innerHTML = str.split(aInp1value).join('<span>'+ aInp1value +'</span>');
}
aInp1[0].value = ''
}
aInp2[2].onclick = function(){
var aInp2value = aInp2[0].value;
var newsStr = aInp2[1].value
if( oP.innerHTML.indexOf(aInp2[0].value) == -1 ){
alert('对不起,您输入的内容查找不到')
}else if( aInp2[0].value === '' ){
alert('请输入您要查找的内容')
}else{
oP.innerHTML = str.split(aInp2value).join('<span>'+ newsStr +'</span>');
}
aInp2[0].value = ''
aInp2[1].value = ''
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791