구분자 변환기 여러개

ppysi

5년 전 1,598

Copy

<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>

이렇게 하면 작동하는데

어떻게 인풋을 여러개 넣으면 작동되게 할까요?

javascript

답변 2개

채택된 답변

+20 포인트

제로나라

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

// 문자앞에 \ 를 붙입니다.
$src = array('/', '|');
$dst = array('\/', '\|');

$tmp_str = str_replace($src, $dst, $tmp_str);

응용해 보세요...

BiHon

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전

* id는 유일해야 합니다.

간단하게 class 추가하고, 자바스크립트에서 그 값을 이용하면 되겠습니다.

그러면 input을 얼마든지 늘려도 전체 처리가 간단해지겠죠?

살짝 손 본 코드 첨부합니다.

Copy

<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>

답변을 작성하려면 로그인이 필요합니다.

구분자 변환기 여러개

답변 2개

공유하기