자바스크립트에서 정규식을 이용하여 문자열에서 숫자만 추출하는 방법을 소개합니다.
1. 모든 숫자, 하나의 문자열로 추출
aaa123bbb456와 같이 문자 사이에 숫자들이 있을 때, 문자를 모두 제거하고 남은 숫자들을 하나의 숫자로 이어서 123456을 추출하고 싶을 때가 있습니다.
이럴 때는 아래와 같이 정규식으로 문자를 모두 제거하면 됩니다. [^0-9]는 숫자가 아닌 문자들을 의미하는 패턴이며, g는 문자열에서 모든 패턴을 찾으라는 의미입니다. replace(regex, "")을 수행하면 regex에 해당하는 모든 패턴을 찾아서 ""으로 변환합니다. 즉, 숫자가 아닌 문자들이 모두 제거됩니다. 이렇게 리턴된 숫자는 타입이 String인데, parseInt()로 Number 타입으로 변환할 수 있습니다.
const str = "Hello_123_World_456_!!!";
const regex = /[^0-9]/g;
const result = str.replace(regex, "");
const number = parseInt(result);
console.log(result);
console.log(typeof(result));
console.log(number);
console.log(typeof(number));Output:
123456
string
123456
number2. 연속으로 이어진 숫자, 리스트로 추출
aaa123bbb456와 같은 문자열에서 123만 추출하거나 456만 추출하고 싶을 때가 있습니다. 이럴 떄는 정규식의 match()를 이용하여 숫자 패턴을 찾으면 됩니다.
예를 들어, d+는 숫자로 된 문자 1개 이상인 문자열을 의미하며 g는 모든 패턴을 찾으라는 의미입니다. foo31bar52에서 이 패턴에 일치하는 것은 31과 52입니다. 그래서 리턴값을 보면 이 두개 숫자가 리턴됩니다.
let found = "foo31bar52".match(/\d+/g);
console.log(found);Output:
[ '31', '52' ]위와 같이 match()를 이용하여, 아래와 같이 첫번째로 찾은 숫자와 두번쨰로 찾은 숫자를 Index로 접근할 수 있습니다.
let num = "foo31bar52".match(/\d+/g)[0];
console.log(num);
num = "foo31bar52".match(/\d+/g)[1];
console.log(num);Output:
31
52Loading script...
Related Posts
- ESLint warning, Expected '===' and instead saw '==' eqeqeq
- Javascript - 현재 날짜/시간을 항상 한국 기준으로 가져오기
- Javascript - 문자열 사이에 문자 넣기
- Javascript - 버튼 활성화/비활성화 시키는 방법
- Javascript - 버튼 이름 변경하기
- Javascript - div 안의 내용 가져오기, 변경, 추가, 삭제
- Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제
- Javascript - div 생성, 추가, 삭제 방법
- Javascript - 테이블 행(tr) 숨기기, 보이기
- Javascript - div에 링크 거는 방법
- Javascript - 자식 요소(element) 개수 확인
- Javascript - 요소(element) 복사, 붙여넣기
- Javascript - div에 클릭 이벤트(onclick) 설정 방법
- Javascript - 체크박스 선택/해제 시, 텍스트박스 활성화/비활성화
- Javascript - input 숫자만 입력받도록 설정
- Javascript - 자식 노드 모두 제거
- Javascript - 체크박스 선택, 해제 방법
- Javascript - input text 값 가져오기
- JavaScript - 문자열을 배열(Array)로 변환
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - 배열 전체 출력 (for, forEach, for in, for of)
- JavaScript - 한번만 실행되는 함수 (once: true)
- JavaScript - 선택된 checkbox 값 가져오기
- JavaScript - div, 태그 안의 내용 가져오기
- JavaScript - element(버튼, div) 보이기 숨기기
- JavaScript - 숫자를 배열로 변경하는 방법
- JavaScript - 부모, 형제, 자식 element 찾기
- JavaScript - 클래스 이름으로 element 찾는 방법
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화