구분자 변환기 여러개
본문
<input id="demo" type="text" placeholder="" style=""><br>
<label for="sp">기존 구분자 (Existing separator)</label>
<select name="sel1" id="sel1">
<option value=":">:</option>
<option value="/">/</option>
<option value=" ">(공백)</option>
<option value="|">|</option>
<option value=",">,</option>
<option value="-">-</option>
</select><br>
<label for="sp">바꿀 구분자 (New separator)</label>
<select name="sel" id="sel">
<option value="/">/</option>
<option value=":">:</option>
<option value=" ">(공백)</option>
<option value="|">|</option>
<option value=",">,</option>
<option value="-">-</option>
</select><br>
<button onclick="myFunction()">Change</button>
<button onclick="myFunction1()">Clear</button>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
var sel = document.getElementById("sel").value;
var sel1 = document.getElementById("sel1").value;
var replaced = str.split(sel1).join(sel);
document.getElementById("demo").value = replaced;
}
</script>
<script>
function myFunction1() {
document.getElementById("demo").value= '';
}
</script>
이렇게 하면 작동하는데
어떻게 인풋을 여러개 넣으면 작동되게 할까요?
답변 2
// 문자앞에 \ 를 붙입니다.
$src = array('/', '|');
$dst = array('\/', '\|');
$tmp_str = str_replace($src, $dst, $tmp_str);
응용해 보세요...
* id는 유일해야 합니다.
간단하게 class 추가하고, 자바스크립트에서 그 값을 이용하면 되겠습니다.
그러면 input을 얼마든지 늘려도 전체 처리가 간단해지겠죠?
살짝 손 본 코드 첨부합니다.
<input type="text" placeholder="" style="" class="input"><br>
<input type="text" placeholder="" style="" class="input"><br>
<input type="text" placeholder="" style="" class="input"><br>
<label for="sp">기존 구분자 (Existing separator)</label>
<select name="sel1" id="sel1">
<option value=":">:</option>
<option value="/">/</option>
<option value=" ">(공백)</option>
<option value="|">|</option>
<option value=",">,</option>
<option value="-">-</option>
</select><br>
<label for="sp">바꿀 구분자 (New separator)</label>
<select name="sel" id="sel">
<option value="/">/</option>
<option value=":">:</option>
<option value=" ">(공백)</option>
<option value="|">|</option>
<option value=",">,</option>
<option value="-">-</option>
</select><br>
<button onclick="myFunction()">Change</button>
<button onclick="myFunction1()">Clear</button>
<script>
'use strict';
function myFunction() {
var sel = document.getElementById('sel').value;
var sel1 = document.getElementById('sel1').value;
var objs = document.querySelectorAll('.input');
objs.forEach(function(obj, i) {
var str = obj.value;
var replaced = str.split(sel1).join(sel);
obj.value = replaced;
});
}
</script>
<script>
function myFunction1() {
var objs = document.querySelectorAll('.input');
objs.forEach(function(obj, i) {
obj.value = '';
});
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
