구분자 변환기 여러개 채택완료
ppysi
5년 전
조회 1,517
</p>
<p><input id="demo" type="text" placeholder="" style="">
<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>
<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>
<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></p>
<p>이렇게 하면 작동하는데
어떻게 인풋을 여러개 넣으면 작동되게 할까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
// 문자앞에 \ 를 붙입니다. $src = array('/', '|'); $dst = array('\/', '\|');
$tmp_str = str_replace($src, $dst, $tmp_str);
응용해 보세요...
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
5년 전
* id는 유일해야 합니다.
간단하게 class 추가하고, 자바스크립트에서 그 값을 이용하면 되겠습니다.
그러면 input을 얼마든지 늘려도 전체 처리가 간단해지겠죠?
살짝 손 본 코드 첨부합니다.
</p>
<p><input type="text" placeholder="" style="" class="input">
<input type="text" placeholder="" style="" class="input">
<input type="text" placeholder="" style="" class="input">
<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>
<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>
<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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인