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

時間 2019-12-05

標籤使用簡單實現文字內容批量多重替換功能欄目 JavaScript 简体版

原文原文鏈接

主要是由於我本人工做中須要將一些文字內容批量或者多重替換，而後提交到 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 裏面或者想其餘辦法。

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

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

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