문자열에 콤마를 찍는 것은 JavaScript에서 숫자를 천 단위로 구분할 때 흔히 사용하는 작업입니다. 아래는 JavaScript를 사용하여 숫자에 콤마를 추가하는 방법을 보여줍니다:
function addCommasToNumber(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
var number = 1234567; //콤마를 추가할 숫자
var numberWithCommas = addCommasToNumber(number);
console.log(numberWithCommas); // 출력: "1,234,567"
이 코드에서 addCommasToNumber 함수는 숫자를 문자열로 변환한 후 정규식을 사용하여 숫자에 콤마를 추가합니다. 정규식 \B(?=(\d{3})+(?!\d))는 숫자를 천 단위로 구분하는 역할을 합니다.
만약 특정 입력 필드에서 사용자의 입력에 콤마를 추가하려면, 다음과 같이 이 함수를 사용할 수 있습니다:
function handleInput() {
var userInput = document.getElementById("userInput").value;
var inputAsNumber = parseFloat(userInput.replace(/,/g, '')); // 입력값에서 기존 콤마 제거 후 숫자로 변환
if (!isNaN(inputAsNumber)) {
var numberWithCommas = addCommasToNumber(inputAsNumber);
document.getElementById("output").textContent = numberWithCommas;
} else {
document.getElementById("output").textContent = "유효한 숫자를 입력하세요.";
}
}이 코드는 HTML의 입력 필드(userInput)에서 사용자의 입력을 읽어들이고, 콤마가 포함된 문자열에서 콤마를 제거한 후 숫자로 변환합니다. 그런 다음 addCommasToNumber 함수를 사용하여 콤마가 추가된 문자열로 변환한 다음 출력란에 표시합니다.
숫자만 입력되도록 하고, 천 단위로 콤마 찍기
<!DOCTYPE html>
<html>
<head>
<title>숫자 입력 필드</title>
</head>
<script>
function formatNumberWithCommas(input) {
// 입력된 값을 숫자로 파싱하고, 숫자가 아닌 문자를 제거하고 숫자에 콤마를 추가
var numericValue = input.value.replace(/\D/g, "");
var formattedValue = addCommasToNumber(numericValue);
input.value = formattedValue;
}
function addCommasToNumber(number) {
return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
</script>
<body>
<label for="numericInput">숫자 입력:</label>
<input type="text" id="numericInput" name="numericInput" oninput="formatNumberWithCommas(this)">
</body>
</html>위의 코드에서 formatNumberWithCommas 함수는 숫자 입력 필드의 내용이 변경될 때 호출되며, 입력된 값에서 숫자가 아닌 문자를 제거하고 숫자에 콤마를 추가한 다음 입력 필드에 설정합니다. addCommasToNumber 함수는 숫자에 콤마를 추가하기 위한 도우미 함수입니다.
이렇게 하면 사용자가 입력한 숫자에 천 단위로 콤마가 자동으로 추가되며, 숫자만 입력될 것입니다.
문제 해결을 위해 입력된 숫자가 너무 길어서 콤마를 추가하는 부분에서 오류가 발생하는 경우, 다음과 같이 코드를 수정할 수 있습니다:
function formatAndLimitInput(input) {
// 입력된 값을 숫자로 파싱하고, 숫자가 아닌 문자를 제거하고 숫자에 콤마를 추가
var numericValue = input.value.replace(/[^\d]/g, "");
var formattedValue = addCommasToNumber(numericValue);
// 숫자 길이를 26자로 제한
if (formattedValue.length > 26) {
formattedValue = formattedValue.substr(0, 26);
}
input.value = formattedValue;
}
function addCommasToNumber(number) {
return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}변경된 부분은 formattedValue.length > 26를 확인하는 조건입니다. 이제 길이가 26자를 초과할 때만 자릅니다. 이렇게 수정하면 입력된 숫자가 26자로 제한되며, 길이가 초과되지 않으면 콤마가 올바르게 추가됩니다.
이러한 변경을 통해 입력된 숫자의 길이가 26자 이상이면 자르고, 26자 이하인 경우에는 콤마가 정상적으로 추가될 것입니다.
'두번째 프로젝트 이야기 > common_util.js' 카테고리의 다른 글
| common.util.js 이란 (0) | 2023.10.25 |
|---|