简单的网页文章内容文字查找替换js代码

来源:https://www.sucaihuo.com/js/3845.html 2018-08-02 11:46浏览(1073) 收藏

简单的网页文章内容文字查找替换js代码,原生js实现,类似于一些编程工具的查找替换功能。
简单的网页文章内容文字查找替换js代码
分类:其它特效 难易:初级
查看演示 下载资源 下载积分: 20 积分

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>
标签: 查找替换
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2