js小工具

本文介绍了一个简单的文本比较工具,能够实现文本数据的去重、排序、比较等功能,并展示了具体的实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

花了一个半小时写了个比较的小工具,虽然简陋,但是足够自己用了

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />		
	</head>
<body>
	<div id="firstDiv">
		<table >
			<tr>
				<td>文本框1</td>
				<td>操作</td>
				<td>文本框2</td>
			</tr>
			<tr>
				<td><textarea id="leftTextArea" rows="30" cols="50">121231233
1
a
b
f
</textarea></td>
				
				<td>
					<input type="button" value="显示条数" onclick="showRows()" >
						<br>
						<input type="button" value="生成逗号分隔" onclick="generateCommaStr()" >
						<br>
					  <input type="button" value="数据比较" onclick="compare()" style="margin-top:5px;">
					  <br>
					  <input type="button" value="排序" onclick="sortData()" style="margin-top:5px;">
					  <br>
					   <input type="button" value="去重复" onclick="clearAllRepeat()" style="margin-top:5px;">
					   <br>
					  <input type="button" value="生成指定sql" onclick="generateSql()" style="margin-top:5px;">
					  
					  
				</td>
				<td><textarea  id="rightTextArea" rows="30" cols="50">121231233
1
e
2
f


</textarea></td>
			</tr>	
			</table>
			<table>
			<tr>
				<td colspan='3'>
					<div >
						<div id="messageRowDiv"></div>
					</div>
				</td>				
			</tr>		
			<tr>
				<td>
						<div id="msgId1" style="margin-right:50px;"></div>
				</td>		
				<td>
					  <div id="msgId2" style="margin-right:50px;"></div>
				</td>
				<td>
						<div id="msgId3"></div>
				</td>		
			</tr>		
		</table>
	</div>
		
		

</body>
</html>

<script>
	
	function clearAllRepeat(){
		clearRepeat("leftTextArea");
		clearRepeat("rightTextArea");
	}
	
	function clearRepeat(areaName){
			var leftValue=document.getElementById(areaName).value;
			var leftArr=leftValue.split("\n");
			var j=0;
			var str='';
			var arr=[];
			for(var i=0;i<leftArr.length;i++){
				var val=trim(leftArr[i])
				if(val!=''&¬ExistsInArray(arr,val)){
					 if(j==0){
							str+=val;
							j++;
						}else{
							str+="\n"+val;
						}
						arr.push(val);
				}
			}		
			document.getElementById(areaName).value=str;		
			
			//显示条数
			showRows();
	}
	
	function notExistsInArray(arr,val){
			for(var i=0;i<arr.length;i++){
				if(trim(arr[i])==val){
					return false;
				}
			}
			return true;
	}
	
	function generateSql(){
		alert("开始生成sql了,哈哈");	
	}
	
	//生成带逗号的字符串
	function generateCommaStr(){
		var leftValue=document.getElementById("leftTextArea").value;
		var leftArr=leftValue.split("\n");
		var j=0;
		var str='(';
		for(var i=0;i<leftArr.length;i++){
			if(trim(leftArr[i])!=''){
				 if(j==0){
						str+="'"+trim(leftArr[i])+"'";
						j++;
					}else{
						str+=",\n'"+trim(leftArr[i])+"'";
					}
			}
		}		
		str+=')';
		
		document.getElementById("rightTextArea").value=str;		
		
		//显示条数
		showRows();
	}
	
	//生成带逗号的字符串
	function compare(){
		showRows();
		lostCompare();
		sameCompare();
		moreCompare();
	}
	
	function sortData(){
		var leftValue=document.getElementById("leftTextArea").value;
		var rightValue=document.getElementById("rightTextArea").value;
		var leftArr=leftValue.split("\n").sort();
		var rightArr=rightValue.split("\n").sort();
		var leftSortedValue='';
		var rightSortedValue='';
		for(var i=0;i<rightArr.length;i++){
			if(trim(rightArr[i])!=''){
				rightSortedValue+=trim(rightArr[i])+"\n";
			}
		}
		
		for(var i=0;i<leftArr.length;i++){
			if(trim(leftArr[i])!=''){
				leftSortedValue+=trim(leftArr[i])+"\n";
			}
		}
		
		document.getElementById("leftTextArea").value=leftSortedValue;
		document.getElementById("rightTextArea").value=rightSortedValue;
		
	}
	
	function moreCompare(){
		var leftValue=document.getElementById("leftTextArea").value;
		var rightValue=document.getElementById("rightTextArea").value;
		var leftArr=leftValue.split("\n");
		var rightArr=rightValue.split("\n");
		
		//缺多少条
		var moreStr='';
		var moreSize=0;
		for(var i=0;i<rightArr.length;i++){
			var tempStr=trim(rightArr[i]);
			if(tempStr!=''){
				var isExist=false;
				for(var j=0;j<leftArr.length;j++){
					if(tempStr==trim(leftArr[j])){
							isExist=true;
					}
				}
				if(false==isExist){
					moreSize++;
					moreStr+=tempStr+"\n";
				}
			}
		}
		
		document.getElementById("msgId3").innerHTML="左边比右边少了"+moreSize+"条数据<br><textarea rows='10'>"+moreStr+"</textarea>";
	}
	
	
	function sameCompare(){
		var leftValue=document.getElementById("leftTextArea").value;
		var rightValue=document.getElementById("rightTextArea").value;
		var leftArr=leftValue.split("\n");
		var rightArr=rightValue.split("\n");
		
	
		var saveStr='';
		var sameSize=0;
		for(var i=0;i<leftArr.length;i++){
			var tempStr=trim(leftArr[i]);
			if(tempStr!=''){
				var isExist=false;
				for(var j=0;j<rightArr.length;j++){
					if(tempStr==trim(rightArr[j])){
							isExist=true;
					}
				}
				if(true==isExist){
					sameSize++;
					saveStr+=tempStr+"\n";
				}
			}
		}
		
		document.getElementById("msgId2").innerHTML="左边和右边"+sameSize+"条数据相同<br><textarea rows='10'>"+saveStr+"</textarea>";
	}
	
	function lostCompare(){
		var leftValue=document.getElementById("leftTextArea").value;
		var rightValue=document.getElementById("rightTextArea").value;
		var leftArr=leftValue.split("\n");
		var rightArr=rightValue.split("\n");
		
		//缺多少条
		var lost='';
		var lostSize=0;
		for(var i=0;i<leftArr.length;i++){
			var tempStr=trim(leftArr[i]);
			if(tempStr!=''){
				var isExist=false;
				for(var j=0;j<rightArr.length;j++){
					if(tempStr==trim(rightArr[j])){
							isExist=true;
					}
				}
				if(false==isExist){
					lostSize++;
					lost+=tempStr+"\n";
				}
			}
		}
		
		document.getElementById("msgId1").innerHTML="左边比右边多了"+lostSize+"条数据<br><textarea rows='10'>"+lost+"</textarea>";
	}
	
	//显示条数
	function showRows(){
		var leftValue=document.getElementById("leftTextArea").value;
		var rightValue=document.getElementById("rightTextArea").value;
		var leftArr=leftValue.split("\n");
		var rightArr=rightValue.split("\n");
		var leftRows=0;
		var rightRows=0;
		
		for(var i=0;i<leftArr.length;i++){
			if(leftArr[i]!=''){
				leftRows++;
			}
		}
		
		for(var i=0;i<rightArr.length;i++){
			if(rightArr[i]!=''){
				rightRows++;
			}			
		}
		
		document.getElementById("messageRowDiv").innerHTML="左边"+leftRows+"条数据,右边"+rightRows+"条数据";
	}
	
	
	function trim(str) {
	  var aa= str.replace(/(^\s+)|(\s+$)/g, "");
	  return aa.replace("\n","");
	}
	
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值