정규표현식(Regex)은 텍스트 안에서 특정 패턴을 찾아내는 강력한 도구입니다. 이 글에서는 자바스크립트의 정규표현식을 활용해 문자열 내부의 공백을 다른 문자로 바꾸거나 완전히 제거하는 방법을 예제와 함께 알아봅니다.
정규표현식(Regex)이란?
정규표현식은 흔히 "RegEx" 또는 "RegExp"라고도 불리며, 문자열(텍스트)을 다룰 때 성능이 뛰어난 도구입니다. 가장 대표적인 사용 사례는 다음과 같습니다.
- 텍스트 유효성 검사
- 텍스트 검색
이번 글에서는 간단한 예제를 통해 한 줄의 텍스트(문자열)에 포함된 모든 공백을 아무것도 없는 값으로 바꾸는 방법을 배워보겠습니다. 물론 아래 코드 예제를 응용하면 공백을 하이픈 같은 다른 문자로 치환할 수도 있습니다.
공백(White Space)도 하나의 문자다
공백 역시 하나의 문자로 취급됩니다. 즉, 지금 읽고 있는 이 문장에서 단어와 단어 사이의 띄어쓰기 하나하나가 모두 공백 문자로 계산됩니다.
예를 들어 다음 문장에는 공백 문자가 정확히 6개 있습니다.
"This sentence has 6 white space characters."\s 메타 문자로 공백 찾기
공백 문자를 치환하려면 정규표현식의 메타 문자(meta-character)인 \s를 사용합니다. \s는 줄바꿈(newline), 탭(tab), 유니코드 공백을 포함해 모든 종류의 공백 문자 하나를 찾아냅니다.
실제 코드는 다음과 같습니다.
const sentence = "This sentence has 6 white space characters."
console.log(sentence.replace(/\s/g, ""))
// Thissentencehas6whitespacecharacters.코드 동작 원리
- replace() 메서드 연결: 공백을 제거하고 싶은 문자열을 담고 있는
sentence변수에replace()메서드를 붙입니다. - \s 메타 문자: 앞서 설명한
\s메타 문자를 인수로 전달해 공백 문자를 찾습니다. 자바스크립트에서 백슬래시(\)는 예약된 이스케이프(escape) 문자이므로, 앞에 슬래시(/)를 붙여 언이스케이프(unescape) 처리하여/\s/형태로 작성합니다. - g(전역) 플래그: 전역 플래그
g는 문자열에서 모든 공백 문자를 찾으라는 의미입니다. 만약g플래그를 빼먹으면 첫 번째 공백(This sentence사이)만 치환됩니다. - 교체할 값: 마지막으로 공백을 무엇으로 바꿀지 지정합니다. 여기서는 빈 문자열
""을 사용했기 때문에 공백 문자가 모두 제거되어 모든 단어가 하나로 붙게 됩니다.
원본 변수는 그대로 유지된다
주의할 점은, 위 방식으로는 원본 sentence 변수 자체가 수정되지 않는다는 것입니다. console.log()는 단지 replace(/\s/g, "") 정규식 메서드를 적용했을 때 결과가 어떻게 보이는지 출력해줄 뿐입니다.
만약 sentence 변수의 값을 실제로 공백 없는 상태로 변경하고 싶다면, 결과를 새로운 변수에 할당하고 이후에는 그 변수를 참조해야 합니다.
const sentence = "This sentence has 6 white space characters."
const sentenceRemoveWhiteSpace = sentence.replace(/\s/g, "")
console.log(sentenceRemoveWhiteSpace)
// Thissentencehas6whitespacecharacters.match()로 공백 개수 확인하기
계산이 맞는지 검증하기 위해, 또 다른 유용한 정규식 메서드인 match()를 사용해 원본 sentence 변수의 공백 문자 개수를 세어 보겠습니다. 과연 6개일까요?
console.log(sentence.match(/\s/g).length)
// 6역시 6개가 맞네요!