my story

jquery 천단위 숫자 적용하기. 본문

코딩

jquery 천단위 숫자 적용하기.

무지개약속 2023. 4. 7. 10:29
<!-- 표시할 숫자가 있는 요소 -->
<div id="myNumber">1234567</div>
// 천단위 숫자 포맷 적용 함수
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 숫자 요소를 선택하고 포맷을 적용
var myNumber = $("#myNumber").text();
$("#myNumber").text(numberWithCommas(myNumber));

먼저, 숫자를 천단위로 구분하여 포맷을 적용하는 numberWithCommas() 함수를 작성합니다. 이 함수는 문자열로 변환된 숫자에 정규 표현식을 적용하여 숫자를 천단위로 구분하고, 각 구분자 사이에 쉼표를 추가합니다.

이후에는 jQuery의 $() 함수를 사용하여 숫자 요소를 선택하고, .text() 메서드를 사용하여 해당 요소의 텍스트 값을 가져옵니다. 가져온 텍스트 값을 numberWithCommas() 함수에 인자로 전달하여 포맷을 적용하고, .text() 메서드를 다시 사용하여 포맷이 적용된 텍스트 값을 숫자 요소에 설정합니다.

위 코드에서는 $("#myNumber") 선택자를 사용하여 id 속성이 myNumber인 요소를 선택하였습니다. 다른 요소를 선택하려면 적절한 선택자를 사용하면 됩니다.

Comments