자바스크립트(Javascript) 문자 일정간격으로 하이픈(-) 추가하기

문자열에서 특정 자리마다 “-”를 추가하는 방법은 “replace()” 함수와 정규 표현식을 사용하여 구현할 수 있습니다. 예를 들어, 정규 표현식은 "123456" 문자열에서 "123"과 "456"을 각각 별도의 동일한 값을 찾습니다. 전방탐색을 사용하여 일치시키기 때문에 "123" 다음에 오는 "4"와 "456" 다음에 오는 "7"은 포함되지 않습니다. 이 정규 표현식을 사용하면 특정 패턴을 가진 숫자를 찾을 때 유용합니다.

 

 

 

 

◎ 1. 구문과 인수 정의

 

“replace()” 함수는 두 개의 인수를 받습니다. 첫 번째 인수는 대체할 패턴(정규 표현식)이며, 두 번째 인수는 대체할 문자열입니다.

 

newStr = str.replace(regexp|substr, newSubstr|function) l  “str”: 원본 문자열입니다. l  “regexp|substr”: 대체할 패턴을 나타내는 문자열 또는 정규식입니다. l  “newSubstr|function”: 대체될 새로운 문자열 또는 함수입니다.

 

 

 

◎ 2. 사용 예제와 설명

 

예제는 3자리마다 “-” 를 입력하는 방법입니다. “regexPattern” 변수는 “\\d{3}(?=\\d)”이라는 정규 표현식을 정의합니다. 이 패턴은 3자리 숫자를 찾고 그 뒤에 숫자가 있을 때만 일치합니다. “replacement” 변수는 “$1-”로 설정되어 있으며, “$1”은 정규 표현식에서 첫 번째 캡처 그룹을 나타내고, “-” 는 3자리 숫자 뒤에 추가할 문자입니다.

 

const originalString = "1234567890"; // 원래 문자열
const regexPattern = /(\\d{3})(?=\\d)/g; // 3자리 숫자를 찾는 정규 표현식
const replacement = "$1-"; // $1은 첫 번째 캡처 그룹을 나타내며, '-'를 추가
 
const formattedString = originalString.replace(regexPattern, replacement);
console.log(formattedString);
 
[출력]
123-456-789-0

 

 

이 정규 표현식 “/(\\d{3})(?=\\d)/g”은 3자리 숫자 그룹을 찾아내기 위한 패턴입니다. 다음은 이 정규 표현식의 각 구성 요소를 설명합니다.

l  “/”와 “/”: 정규 표현식은 대개 시작과 끝을 나타내기 위해 슬래시 “/”로 감싸집니다.

l  “(\\d{3})”: 이 부분은 괄호 “()”로 둘러싸여 있으며, 숫자를 나타내는 “\\d”와 중괄호 “{}”로 숫자의 길이를 지정합니다. 따라서 “\\d{3}”은 3자리 숫자에 일치합니다. 이 부분은 캡처 그룹으로, 나중에 추출할 때 사용됩니다.

l  “(?=\\d)”: 이 부분은 숫자를 나타내는 “\\d”와 전방탐색을 나타내는 “(?= ... )”를 사용합니다. 전방탐색은 일치가 진행될 때 해당 위치의 문자열을 포함하지만 실제 일치에는 포함되지 않습니다. 이것은 숫자 앞에 3자리 숫자를 찾고, 그 뒤에 숫자가 더 있을 때만 일치시키는 역할을 합니다.

l  “g”: 이 플래그는 정규 표현식의 일치를 전역으로 검색하도록 지정합니다.