使用jq 簡單實現 文字內容,批量多重替換功能

主要是由於 我本人工做中須要 將 一些文字內容 批量或者多重替換 ,而後 提交到 SVN上面。javascript

也就是 所謂的 代碼  改動登記了。 由於代碼登記有它的 格式, 因此須要 多重批量 替換文字的功能。css

通常的電腦的 或者其餘的編輯器,都是 單個批量替換內容的, 我要多重替換就得 多重操做替換屢次。。。html

這樣效率過低了。。。java

固然 網上也有一些小工具好比 TextReplace_v1.8 jquery

這些 百度確定能夠出來。 cookie

但是呢 我用了一些感受挺麻煩的,並且還得 一直打開它,不然每次打開就得加入我須要批量多重替換的 字典文件。。。感受不夠輕,過重了。一些功能我並不須要。編輯器

再說了 誰知道有沒有病毒? 怎麼放心?工具

網上也找過了,,,竟然沒有 相似這樣的 網站上面沒有找到 這樣的功能。網站

估計 很差實現。並且也很差 保存用戶的 替換 字典內容吧。this

 

實現的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>格式化SVN提交登記內容</title>
   
   <!-- <script src="jquery-1.8.3.min.js" type="text/javascript"></script>-->
   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
   
   
   <style type="text/css">
   	  #find_r li input{
   	  	width: 350px;
   	  	 border:1px  solid #ccc;
    border-radius: 4px;  //圓角效果
    height: 24px;
    line-height:24px;  /垂直居中
   	  }
   	  
   	  
   	  
   </style>
</head>
<body>
   <div id="" style="width: 1200px;margin: 0 auto;">
   	
   		<div id="">
   			<ol id="find_r">
   				<li>
   					<span>查找的內容: </span> <input type="text"  id="find1" value=".java" />
   					<span> 替換的內容: </span> <input type="text"  id="r1" value=".class" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"  id="find2" value="D:\SVN\rpd-mall\branches\1.3.3\rpd-mall\src\" />
   					<span> 替換的內容: </span> <input type="text"  id="r2" value="\WEB-INF\classes\" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"  id="find3" value="/" />
   					<span> 替換的內容: </span> <input type="text"  id="r3" value="\" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"  id="find4" value="D:\SVN\rpd-mall\branches\1.3.3\rpd-mall\WebRoot" />
   					<span> 替換的內容: </span> <input type="text"  id="r4" value="" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"  id="find5" value="" />
   					<span> 替換的內容: </span> <input type="text"  id="r5" value="" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"   value="" />
   					<span> 替換的內容: </span> <input type="text"   value="" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"   value="" />
   					<span> 替換的內容: </span> <input type="text"   value="" />
   				</li>
   				<li>
   					<span>查找的內容: </span> <input type="text"   value="" />
   					<span> 替換的內容: </span> <input type="text"   value="" />
   				</li>
   			</ol>
   			
   			<div id="">
   				<input type="button" id="add" value="新增自定義查找替換" />
   			</div>
   		</div>
   	
   		<div id="" style=" margin-top: 30px;">
   			<div id="">
   				須要格式化的內容:
   			</div>
   			<textarea id="formate_before" name="" rows="20" style="width: 1000px;"></textarea>
   		</div>
   		
   		<div id="">
   			<input type="button" id="exec" value="執行格式化" />
   		</div>
   		
   		<div id="" style=" margin-top: 30px;">
   			<div id="">
   				格式化的內容:
   			</div>
   			<textarea id="formate_after" name="" rows="20" style="width: 1000px;"></textarea>
   		</div>
   	
   </div>
</body>

<script>
	jQuery(document).ready(function(){
		
		$("#exec").click(function(){
			var formate_before=$("#formate_before").val();
			
			//var n=(formate_before.split('\n')).length-1;
			//console.log("換行符出現的次數>>>"+n);
			var nCount=(formate_before.split('\n')).length;
			
			$("#find_r li").each(function(){
				
				
				var findInput = $(this).find("input").eq(0);
				var rInput = $(this).find("input").eq(1);
				
				if(findInput.val()==""){
					return true;
				}
				
				// 達到全局替換的目的, 或者經過 比較替換前的內容和替換後的內容是否相同,相同就表示 全局替換完成,不然就要繼續
				for (var i = 0; i <= nCount; i++) {
        			formate_before = formate_before.replace(findInput.val(),rInput.val());
    			}

				
				
			});
			
			$("#formate_after").val(formate_before);
			
		});
		
	});	
	
</script>

</html>

 

 

 

 

 

 

 

 

 

總結

 

其實這個只是很簡單,知足個人需求而已,若是須要更強大的,能夠加上  正則匹配替換。

等, 用戶的 替換字典能夠想辦法保存下來,能夠保存在 cookie 裏面或者想其餘辦法。

其實我隨便寫這個小功能, 也花了一點時間。 

咱們 碼農學了 技術,就要想辦法 使用它, 首先要 可以知足本身,幫助本身提升 工做的效率。

而不是 只覺得學了 技術就是  爲了 工做, 複製粘貼, 增刪查改。

相關文章
相關標籤/搜索