[JavaScript] 문자열 공백 제거

1. trim() 으로 공백 제거

1.1) trim() 메소드는 원본 문자열을 수정하지 않고 문자열 양 끝의 공백을 제거하고 새로운 문자열을 반환한다. 

let str = "  Hello, Wolrd  ";
console.log(str.trim());

//console 결과값
"Hello,World"

1.2) trimStart(), trimEnd()는 문자열 왼쪽 또는 오른쪽 공백을 제거하고 새로운 문자열을 반환한다.

let str = "  Hello, World  ";

let tStart = str.trimStart(); //문자열이 시작하는 왼쪽 공백열 제거
console.log(tStart);

//console.결과값
"Hello, World  "

let tEnd = str.trimEnd(); //문자열이 끝나는 오른쪽 공백열 제거
console.log(tEnd);

//console.결과값
"  Hello, World"

---

2. split(), join() 으로 공백 제거

trim() 메소드는 문자열 사이의 공백은 지워주지 않는다. 문자열 사이 사이 모든 공백까지 제거하고 싶다면 split() 메소드와 join() 메소드를 통해 사용할 수 있다.

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.split(' ').join('');

console.log(strReplace);

//console 결과값
"Hello,World"

---

3. replace() 으로 공백 제거

3.1) replace() 기본 구문

str.replace("찾을 문자열", "변경할 문자열")

3.2) replace()로 공백 제거해보기

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.replace(/ /gi,"");

console.log(strReplace);

//console 결과값
"Hello,World"

replace() 메소드에 위 예시와 같이 "찾을 문자열"에 공백을 넣고, "변경할 문자열"에 빈문자열을 넣어서 공백을 제거하려고 했는데 맨 앞의 공백만 지워진 값만 반환되었다. 그 이유는 replace() 메소드는 왼쪽에서 부터 함수를 실행시키며 제일 먼저 일치하는 값만 변경시키고 모든 텍스트에 적용시키지 않기 때문이다. 그렇다면 어떻게 해야 replace() 메소드로 모든 텍스트에 적용시킬 수 있을까? 방법은 정규표현식을 사용하는 것이다.

 

3.3) 정규 표현식이란?

정규 표현식은 문자열에서 '특정 문자'를 찾기 위한 패턴이다.

 

예를 들어 휴대전화번호는 010-1111-2222로 "숫자3개"-"숫자4개"-"숫자4개"로 이루어져있는데, 정규 표현식으로 아래와 같이 패턴을 만들어주면 특정 문자가 해당 패턴에 맞는지 확인할 수 있다.

const regex = /\d{3}-\d{4}-\d{4}/;
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.)

regex.test('010-1111-2222') // true;
regex.test('01-11-22') // false;

문자열 중에서 전화번호만 추출할 수도 있다.

const text = "안녕하세요 제 번호는 010-1111-2222 입니다. call me~!";
text.match(/\d{3}-\d{4}-\d{4}/); // 010-1111-2222

참고) 자주 사용되는 정규표현식 기호

* : 뒤에 이어지는 문자까지 모두 선택
d : 숫자를 의미함
s : 공백을 의미함
^ : 시작하는 점을 의미함
$ : 끝나는 점을 의미함

 

3.4) 정규 표현식으로 문자열 전체 공백 제거해보기

• g : 전체 모든 문자열을 변경 global
• i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색 ignore

let str = "  Hello, World  ";
let strReplace = str.replace(/ /gi,"");

console.log(strReplace);

//console 결과값
"Hello,World"

찾을 문자열에 정규 표현식 / /gi 를 작성함으로써 replace() 메소드에게 전체 문자열에서 공백을 찾은 후 빈문자열으로 변환하라는 명령어가 작성되었고, console에는 모든 공백이 제거된 값이 반환되었다. 위에 작성한 정규식 코드는 아래와 같은 방법으로도 사용할 수도 있다.

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.replace(/\s/gi,"");

console.log(strReplace);

//console 결과값
"Hello,World"

위 코드는 공백을 s로 바꾸었는데 s는 정규표현식에서 공백을 의미하는 코드로 사용된다.

 

3.4) 정규 표현식으로 문자열 앞 공백만 제거해보기

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.replace(/^ /gi, "");

console.log(strReplace);

//console 결과값
" Hello, World  "

기존 str 변수 앞에 위치해있던 두 개의 공백 중 하나의 공백만 사라짐

 

3.5) 정규 표현식으로 문자열 뒤 공백만 제거해보기

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.replace(/\s$/gi, "");

console.log(strReplace);

//console 결과값
"  Hello, World "

기존 str 변수 뒤에 위치해있던 두 개의 공백 중 하나의 공백만 사라짐

---

4. replaceAll() 으로 공백 제거

replace() 메소드는 첫 번째 찾은 문자열만 변환하고 종료하는 메소드이지만 replaceAll() 메소드는 모든 문자열 내에 찾는 문자열을 찾고 변환시켜준다. 

let str = "  Hello, World  "; //(참고)앞 뒤에 띄어쓰기가 두 번씩 들어가있음.
let strReplace = str.replaceAll(" ","");

console.log(strReplace);

//console 결과값
"Hello,World"