[JavaScript] 콤마 생성 및 삭제하기!

#자바스크립트 #변수값콤마생성 #변수값콤마삭제 #콤마제거 #컴마제거 #comma생성 #콤마만들기 #자바스크립트콤마 #JS콤마

포스팅 목차 바로가기

안녕하세요, 배곧동개발자 입니다.

입력폼을 만들다보면 가격과 같은 부분을 만들때 천단위로 짤라서 콤마를 입력해야하는 경우가 생깁니다

그럴때 사용하시면되는 소스코드를 알려드릴께요!

1. 콤마 추가

function addComma(input){
  var output = "";
  for(var i=input.length; i>=0; i--){
  if((input.length-i)%3==1 && output.length!=0 && input.charAt(i) != "-"){
  output = "," + output;
  }
  output = input.charAt(i) + output;
  }
  return output;
}

이렇게 선언을 해 준다음에 실행을 한번 해봅시다.

콤마가 아주 이쁘게 붙었지요? 그럼 이제 제거를 해봅시다.

2. 콤마 제거

function removeComma(val){
  if(val != ""){
    val = val.replace(/,/g, "");
  }
  return val;
}

정규식을 이용해서 ,를 삭제해주는 겁니다. 역시나 실행을 해보면 아래와 같이 잘 동작하심을 확인하실겁니다.

3. 콤마로직 응용하기

자, 우리는 이걸 어떻게 쓸까요? 재미있게 한번 응용해봅시다.

function addComma(obj){
  var input = obj.value;
  var output = "";
  for(var i=input.length; i>=0; i--){
  if((input.length-i)%3==1 && output.length!=0 && input.charAt(i) != "-"){
  output = "," + output;
  }
  output = input.charAt(i) + output;
  }
  obj.value = output;
}

function removeComma(obj){
  var val = obj.value;
  if(val != ""){
    val = val.replace(/,/g, "");
  }
  obj.value = val;
}

위에 코드와 같이 조금 변경해줍니다. 객체를 받아서 그 객체의 값을 변경해주도록 바꿔준 것이지요. 이렇게 코드를 변경해준 다음에 focus 와 blur 에 각각 넣어줘본다면 어떻게 될까요?

focus 이벤트에 넣은 removeComma에 의해서 해당 input을 눌렀을 때에는 콤마가 사라지게 되고

blur 이벤트에 넣은 addComma로 인해 포커싱이 끝나면 콤마가 새로 입혀지게 됩니다.

개인적으로 개발을 잘한다는 것은 레퍼런스가 많고 그 레퍼런스를 잘 찾는 능력이라고 생각해요. 간단해 보이지만 막상 쓰려고 하면 생각 안나는 콤마생성로직.

저장해놓으시고 필요할 때 긁어서 쓰세요!

이만, 배곧동개발자 였습니다.

배곧동개발자