천 단위 쉼표 만드는 방법

예제 1

텍스트로 출력된 숫자에 천 단위 쉼표를 넣습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '#jb' ).text( $( '#jb' ).text().replace( /\,/g, '' ).replace( /(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ) );
      } );
    </script>
    <style>
      body {
        font-family: Consolas;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <p id="jb">123456789</p>
  </body>
</html>

예제 2

폼에 입력하면 실시간으로 쉼표가 붙습니다. 주의할 점은 쉼표도 포함하여 전송된다는 것입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( '.jb' ).on( 'keyup', function() {
          $( this ).val( $( this ).val().replace( /\,/g, '' ).replace( /(\d)(?=(?:\d{3})+(?!\d))/g, '$1,' ) );
        } );
      } );
    </script>
    <style>
      body {
        font-family: Consolas;
        font-size: 40px;
      }
      input {
        font-family: inherit;
        font-size: inherit;
      }
    </style>
  </head>
  <body>
    <input type="text" name="price" class="jb">
  </body>
</html>

jQuery / Tutorial / input 값 변화 감지하는 방법

input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있습니다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아봅니다. input type="number" 숫자를 입력할 수 있는 폼 두 개를 만들고, 값을 입력했을 때 두 수의 곱을 출력해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Tutorial / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( ...