function extractNumbers(str) {
  const regex = /\d+/g;
  return str.match(regex) || [];
}

// 사용 예시
const text = "가격은 12,000원이며, 배송비는 3,000원입니다.";
const numbers = extractNumbers(text);
console.log(numbers); // ["12", "000", "3", "000"]

하지만 위 방법은 숫자를 연속된 값으로 추출하지 않고 나눠서 추출합니다. 콤마(,)와 같은 구분자를 처리하려면:

function extractContinuousNumbers(str) {
  const regex = /\d+(?:,\d+)*/g;
  return str.match(regex) || [];
}

// 사용 예시
const text = "가격은 12,000원이며, 배송비는 3,000원입니다.";
const numbers = extractContinuousNumbers(text);
console.log(numbers); // ["12,000", "3,000"]

소수점이 있는 숫자 추출하기

function extractDecimalNumbers(str) {
  const regex = /\d+(?:\.\d+)?/g;
  return str.match(regex) || [];
}

// 사용 예시
const text = "pH는 5.5이고, 농도는 0.7%입니다.";
const numbers = extractDecimalNumbers(text);
console.log(numbers); // ["5.5", "0.7"]

숫자만 추출해서 숫자 타입으로 변환하기

function extractNumbersAsNumbers(str) {
  const regex = /\d+(?:\.\d+)?/g;
  const matches = str.match(regex) || [];
  return matches.map(Number);
}

// 사용 예시
const text = "pH는 5.5이고, 농도는 0.7%입니다.";
const numbers = extractNumbersAsNumbers(text);
console.log(numbers); // [5.5, 0.7]

문자열 순회를 통한 방법

정규표현식이 익숙하지 않다면 문자열을 순회하며 숫자만 추출할 수도 있습니다.

function extractNumbersManually(str) {
  let result = '';
  
  for (let i = 0; i

연속된 숫자들을 별도로 추출하려면:

function extractNumbersAsArray(str) {
  let currentNumber = '';
  const numbers = [];
  
  for (let i = 0; i

parseInt와 parseFloat 활용법

숫자로 시작하는 문자열에서 첫 번째 숫자 부분만 추출하려면 parseInt와 parseFloat을 활용할 수 있습니다.

// 정수 추출
function extractFirstInteger(str) {
  return parseInt(str);
}

// 소수점 포함 숫자 추출
function extractFirstFloat(str) {
  return parseFloat(str);
}

// 사용 예시
console.log(extractFirstInteger("123px")); // 123
console.log(extractFirstFloat("3.14 파이")); // 3.14

하지만 이 방법은 문자열이 숫자로 시작하지 않으면 작동하지 않습니다:

console.log(extractFirstInteger("가격: 123")); // NaN

Number 객체를 활용한 방법

Number 객체를 활용하면 전체 문자열이 숫자인지 확인할 수 있습니다.

function isEntireStringNumber(str) {
  return !isNaN(Number(str));
}

// 사용 예시
console.log(isEntireStringNumber("123")); // true
console.log(isEntireStringNumber("123.45")); // true
console.log(isEntireStringNumber("123px")); // false

특수한 상황에서의 응용

통화 형식 처리하기

통화 형식(₩, $, € 등)과 천단위 구분자를 처리하는 함수:

function extractCurrencyValue(str) {
  // 통화 기호 및 천단위 구분자 제거
  return parseFloat(str.replace(/[^\d.]/g, ''));
}

// 사용 예시
console.log(extractCurrencyValue("₩12,345.67")); // 12345.67
console.log(extractCurrencyValue("$1,000,000")); // 1000000

음수 처리하기

음수 부호를 포함한 숫자를 추출하는 함수:

function extractSignedNumbers(str) {
  const regex = /-?\d+(?:\.\d+)?/g;
  const matches = str.match(regex) || [];
  return matches.map(Number);
}

// 사용 예시
const text = "온도가 -5℃에서 20℃까지 변화했습니다.";
console.log(extractSignedNumbers(text)); // [-5, 20]

실전 활용: 입력 필드 숫자만 허용하기

사용자 입력에서 숫자만 허용하는 이벤트 핸들러:

function onlyNumberInput(inputElement) {
  inputElement.addEventListener('input', function(e) {
    // 숫자 외의 문자 제거
    e.target.value = e.target.value.replace(/[^\d]/g, '');
  });
}

// 사용 예시 (HTML에서 가 있다고 가정)
const input = document.getElementById('numberInput');
onlyNumberInput(input);

마치며

자바스크립트에서 숫자를 추출하는 방법은 정규표현식을 활용하는 것이 가장 유연하고 강력합니다. 하지만 상황에 따라 다양한 방법을 적절히 조합하여 사용하는 것이 중요합니다. 프로젝트의 요구사항에 맞게 위 함수들을 참고하여 적절한 방법을 선택하시기 바랍니다.

이 포스팅이 도움이 되셨다면 댓글로 알려주세요. 추가로 알고 싶은 자바스크립트 팁이 있으시면 댓글로 요청해 주세요!