多項目取代-JQuery+Boostrap版
以往，我使用PHP、ASP、C#或Java撰寫過個人用的小工具。
覺得Notepad++的取代，只能取代一個字串變成另一個字串，
如搜尋John取代成Mark
但我要搜尋兩種以上的字串，變成另兩種字串
如John,Amy 取代成 Mark,Mary
並且我想要多筆如
My Name is John, I like to play ball，透過取代小工具，產生如下
My Name is Mark,I like to play game
My Name is Jill,I like to play toy
這次，在家裡，花時間重寫了一次，改用純html檔搭配jquery+boostrap，只用一個檔案撰寫，在不需要架server或任何伺服器，純在local就可以跑的程式碼，如下
<html>
<head>
<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>
</head>
<body>
<div class="main_content">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<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>資料</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>搜尋項目(以逗號分割)</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>取代項目(以逗號分割)</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 float-right">
<div class="item_content ">
<button type="button" class="btn btn-info btnTrans">取代</button>
</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>取代結果</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>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.btnTrans').click(function(){
console.log('trans');
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;
$.each(arrSearchItems,function(s_index,s_txt){
var r_txt = replaceDatas[s_index];
var re = new RegExp(s_txt);
result = result.replace(s_txt,r_txt);
});
txtTarget += result +'\r\n';
}
});
objTarget.val(txtTarget);
}
</script>
</body>
</html>
請試著玩玩看，但我不多說，你們玩了才知道好玩之處在哪。