使用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 里面或者想其余办法。

其实我随便写这个小功能，也花了一点时间。

咱们码农学了技术，就要想办法使用它，首先要可以知足本身，帮助本身提升工做的效率。

而不是只觉得学了技术就是为了工做，复制粘贴，增删查改。

使用jq 简单实现 文字内容，批量多重替换功能

使用jq 简单实现文字内容，批量多重替换功能