替代器 - 強化版

替代器 - 強化版

好久沒寫文章了,抱歉了,原本的工作,有雲端硬碟,所以就沒繼續在這邊寫筆記,

但離職了,所以應該就可以常來PO文章了。

最近面試,問我有沒有GitHub,有,但沒在用,

那我有什麼作品可以Demo,對不起,我很廢,所以沒什麼可以Demo

想來想去,我工作上最愛用的工具,就是自己撰寫的替代器。

因為常常需要架PHP程式,過程太麻煩,索性,就來寫個純HTML版的,你只要能下載HTML,你就能使用。

因為我也沒架什麼網站,只想做個純local就好,什麼都不需要的工具

然後就把這個工具當作我的作品。

程式可以前往以下連結取得

https://github.com/newmonkey48/replacetools

替代器, HTML + JQuery + Boostrap + Vue.js版。

因為學到的東西越來越多,所以可以不斷強化版本

替代器,偶爾會使用,當有個客戶,給了你一個Excel,要你改更136洲別的名稱的時候,然到你還在傻傻的複製貼上136次嗎?

我不傻,所以複製完Excel欄位後,取代之間的tab或空間,成為逗號。

再丟到我的替代器,一口氣產生136個 Update SQL。

當你要產生Class名稱,或產生Table Schema,也可以玩這招,先寫好Table Schema Excel 文件後(通常叫工讀生或菜鳥工程師去填規格文件),

再拿他填的規格文件,來大量產生Table。

當然你大量的CRUD程式要撰寫,這招也滿好用的。

為什麼程式可以寫的比人家快呢?因為懶,懶才是做工具的最主要動力。

 

這次我將我原本的取代器構想,改成,可以儲存你想要儲存的資訊到localStorage,以後就不需要撰寫資料庫或後端程式,來儲存資訊。

在local的儲存體可以用自己獨特的儲存載具,來記錄各次的編輯。

程式碼可以到Git 取得

或從以下程式複製

<html>
	<head>	
		<title>Replace Tool</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
	</head>
	<body>
		<div class="main_content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-7">
						<div class="fill_form border px-lg-3 mt-md-3 rounded">
							<form class="mt-md-3">
								<div class="row">
									<div class="col-md-12">
										<div class="form-group">					
											<div class="fill_item">
												<div class="item_title">
													<label>Source Data</label>
												</div>
												<div class="item_content">
													<div class="row">												
														<div class="col-md-12">
															<div class="form-group">
																<div class="fill_item">
																	<div class="item_title">
																	</div>
																	<div class="item_content">
																		<textarea rows="4" type="text" class="form-control form-control-lg txtSource"></textarea>
																	</div>
																</div>
															</div>
														</div>												
													</div>	
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="form-group">					
											<div class="fill_item">
												<div class="item_title">
													<label>Search Items(comma splite)</label>
												</div>
												<div class="item_content">
													<input type="text" class="form-control form-control-lg txtSearchItems">
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="form-group">					
											<div class="fill_item">
												<div class="item_title">
													<label>Replace Items(comma splite)</label>
												</div>
												<div class="item_content">
													<textarea rows="4" type="text" class="form-control form-control-lg txtReplaceItems"></textarea>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="form-group">					
											<div class="fill_item">
												<div class="item_title">
													<label>Target Data</label>
												</div>
												<div class="item_content">
													<div class="row">												
														<div class="col-md-12">
															<div class="form-group">
																<div class="fill_item">
																	<div class="item_title">
																	</div>
																	<div class="item_content">
																		<textarea rows="4" type="text" class="form-control form-control-lg txtTarget"></textarea>
																	</div>
																</div>
															</div>
														</div>												
													</div>	
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="form-group">					
											<div class="fill_item">
												<div class="item_title">
													<label>Save(Please Fill Template Name)</label>
												</div>
												<div class="item_content">
													<div class="row">												
														<div class="col-md-12">
															<div class="form-group">
																<div class="fill_item">
																	<div class="item_title">
																	</div>
																	<div class="item_content input-group">
																		<input type="text" class="form-control form-control-lg txtName mr-3" placeholder="Please Fill Template Name">																		
																	</div>
																</div>
															</div>
														</div>												
													</div>	
												</div>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				    <div class="col-md-5">
						<div class="row mr-3 p7-3">
							<div class="fill_form border px-lg-3 pb-lg-3 mt-md-3 rounded col-md-12">
								<div class="col-md-12">
									<div class="form-group">					
										<div class="fill_item float-left">
											<div class="item_content ">												
												<button type="button" class="btn btn-info btnTrans">Replace</button>
												<button type="button" class="btn btn-info btnClear">Clear</button>
												<button type="button" class="btn btn-info btnSave">Save Template</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>			
						<div class="row mr-1 mt-3">
							<div class="item_title mx-1 mb-1">
								Load Template
							</div>
							<ul class="list-group col-md-12" id="templateList">
							    <li class="list-group-item" v-for="(item, index) in items" v-if="item != null">
								    <div class="input-group col-md-12" >		
										<button type="button" class="btn btn-info float-left mr-2"  v-on:click="deleteTemplate(index)" style="cursor:pointer">Remove</button>	
                                        <button type="button" class="btn btn-info float-left"  v-on:click="setTemplate(index)" style="cursor:pointer">Load Template</button>									
										<div class=" ml-3 rounded border px-3 py-2" v-on:click="setTemplate(index)" style="cursor:pointer">{{item.name}}</div>
									</div>
							    </li>
							</ul>
						</div>		
					</div>
				</div>
			</div>
		</div>
		<script>
			var app = new Vue({
				el: '#templateList',
				data: {
					items: []
				},
				methods:{
					setTemplate: function(index) {
					    loadTemplate(index);
					},
					deleteTemplate: function(index) {
					    delete templates[index];
						templates = filter_array(templates);
						localStorage.Templates = JSON.stringify(templates);
						this.items = templates;
					}
					
				}
			});
			
			function filter_array(data_array) {
				var index = -1,
					arr_length = data_array ? data_array.length : 0,
					resIndex = -1,
					result = [];

				while (++index < arr_length) {
					var value = data_array[index];

					if (value) {
						result[++resIndex] = value;
					}
				}

				return result;
			}
		
		    var templateSource = "Insert Into Country(code,name) values ('KEY_CODE','KEY_NAME');";
			var templateSearch = "KEY_CODE,KEY_NAME";
			var templateReplace = "TW,Taiwan\r\nJP,Japan";
			var templateName = "Insert Country";
			
			var templates = [];
		
			$(document).ready(function(){
				if(localStorage.Templates!='' && localStorage.Templates!=undefined ){
					templates = JSON.parse(localStorage.Templates);
				} else {
					templates.push({
						'replace':templateReplace,
						'source':templateSource,
						'search':templateSearch,
						'name':templateName
					});
					
					localStorage.Templates = JSON.stringify(templates);
				}
				
				app.items = templates;
			
				$('.btnTrans').click(function(){
					trans();
				});
				
				$('.btnLoad').click(function(){
				    loadTemplate(0);					
				});
				
				$('.btnClear').click(function(){
					clearTemplate();
				});
				
				$('.btnSave').click(function(){
					templates.push({
						'replace':$('.txtReplaceItems').val(),
						'source':$('.txtSource').val(),
						'search':$('.txtSearchItems').val(),
						'name':$('.txtName').val()
					});
					
					localStorage.Templates = JSON.stringify(templates);
				});
			});
			
			function clearTemplate() {
				$('.txtSource').val('');
				$('.txtSearchItems').val('');
				$('.txtReplaceItems').val('');
				$('.txtName').val('');
				$('.txtTarget').val('');
			}
			
			function loadTemplate(index){
				$('.txtSource').val(templates[index].source);
				$('.txtSearchItems').val(templates[index].search);
				$('.txtReplaceItems').val(templates[index].replace);
				$('.txtName').val(templates[index].name);
				trans();
			}
			
			function trans(){
				var objSource = $('.txtSource');
				var objSearchItems = $('.txtSearchItems');
				var objReplaceItems = $('.txtReplaceItems');
				var objTarget = $('.txtTarget');
				
				var arrSearchItems = objSearchItems.val().split(',');
				var arrReplaceItems = objReplaceItems.val().split('\n');
				var txrOrigin = objSource.val();
				var txtTarget = '';
				
				$.each(arrReplaceItems,function(index,replaceLine){
					if(replaceLine!=''){
						var replaceDatas = replaceLine.split(',');
						
						var result = txrOrigin;
						
						//s_txt,找尋要找尋的資料
						$.each(arrSearchItems,function(s_index,s_txt){
						    //r_txt,要取代的資料
							var r_txt = replaceDatas[s_index];
							
							var re = new RegExp(s_txt);
							//若s_txt 等於要取代的 r_txt,則不處理
							if(s_txt != r_txt) {
								while(result.indexOf(s_txt) >= 0) {							   
									result = result.replace(re,r_txt);								
								}
							}							
						});
						
						txtTarget += result +'\r\n';
					}
				});
				
				objTarget.val(txtTarget);
			}
		</script>
	</body>
</html>

這希望把我這套工具發揚光大,

有興趣的同好,可自行建立網站存放本工具,或改寫,

記得告訴我連結,我會很高興去使用的,感恩。

歡迎到我的粉絲頁,按讚加分享,

也可以寄信給我交流 newmonkey48@gmail.com

 

=============

因為朋友說不會用的關係。

所以我解說一次,

可以在來源資料裡,放入你想複製的資料,如

Update Country set code = 'KEY_CODE' , name = 'KEY_NAME';

在搜尋項目設定

放入

KEY_CODE,KEY_NAME

表示你想複製來源資料後,取代裡面的KEY_CODE與KEY_NAME

在取代項目中放入

TW,Taiwan
JP,Japan

他會一對一的TW對映KEY_CODE,Taiwan對映KEY_NAME,一列複製一次並取代

結果就變顯示在目標資料中,並按下「取代」(可以以後我要改位置)

Update Country set code = 'TW' , name = 'Taiwan';
Update Country set code = 'JP' , name = 'Japan';

如果你覺得不錯呢?

就可以填入,名稱,並按儲存(可以以後我要改位置)

Update Country