[JavaScript/자바스크립트] 문자열의 양 옆 사이드 공백 제거하기 - trim(), replace()

• trim()
  • 자체적으로 양 옆 공백을 제거해주는 메서드
• replace()
  
  • 정규식을 이용하여 양 옆 공백을 제거해주는 메서드로 좀 더 커스터마이징으로 활용 가능

 

---

1. trim()

let str = ' 반가워요! ';

let trimValue = str.trim();

console.log(trimValue);

// 출력
'반가워요!'

 

 

2. replace()

let str = ' 반가워요! ';

let trimValue = str.replace(/^\s+|\s+$/gm, '');

console.log(trimValue);

// 출력
'반가워요!'

---

2-1. replace의 모든 공백 제거

let str = ' 반 가 워 요 ! ';

let trimValue = str.replace(/ /gi, '');

console.log(trimValue);

// 출력
'반가워요!'

 

2-2. 맨 앞의 공백만 제거

let str = ' 반가워요 ! ';

let trimValue = str.replace(/^ /gi, '');

console.log(trimValue);

// 출력
'반가워요 ! '

 

2-3. 맨 뒤의 공백만 제거

let str = ' 반가워요! ';

let trimValue = str.replace(/\s$/gi, '');

console.log(trimValue);

// 출력
' 반가워요!'

 

2-4. 앞 뒤 공백을 제거 = trim()과 같은 역할

let str = ' 반 가 워 요 ! ';

let trimValue = str.replace(/(^\s*)|(\s*$)/gi, '');

console.log(trimValue);

// 출력
'반 가 워 요 !'

 

---

리액트에서 사용자 UI를 위해 onChange 에 메서드 적용하려고 했었는데, 제목같은 경우는 onChange에서 trim()을 먹이면 곤란하다. 타이밍 하나하나가 뒤 공백으로 인식하여 띄어쓰기가 안되기 때문에 (1) 앞에 공백을 제거하거나 (2) onchange가 아닌 API 통신 또는 값을 보내는 부분에서 양옆 공백을 적용해야 한다.