자바스크립트의 문자열을 다룰 때 공백을 제거하는 것은 어렵지 않다. 다만, 공백을 제거하는 과정이 귀찮을 뿐이다. 선택적으로 공백을 제거하고 싶지만 trim() 메서드를 사용한다고 해도 문자열은 앞과 뒤의 공백만 사라질 뿐이다. 모든 공백을 제거하려면 정규식을 같이 사용하면 된다. 빈문자열 또한 공백임을 알아두자.
자바스크립트 문자열 공백 제거 빈문자열 없애기
removing javascript whitespace
모든 프로그래밍이 그렇듯 문자열을 다루는 것은 어려운 것보다는 귀찮은 작업이 많다.
공백에 대한 처리 또한 귀찮음이 밀려오는 것 중 하나이다.
자바스크립트에서는 공백을 제거할 수 있는 방법이 2가지가 있다.
참고로 공백문자열 또한 공백이다.
trim() 메서드를 사용하는 방법과 정규식을 활용하는 방법이다.
앞 뒤 공백제거 trim() 메서드
자바스크립트의 trim() 메서드는 문자열의 공백을 없애주는 역할을 한다.
다만, 문자열의 앞과 뒤에 있는 공백을 없앨 뿐 문자열의 중간에 있는 공백은 제거되지 않는다.
그럼에도 trim() 을 사용하는 이유는 일단 앞 또는 뒤만 공백을 제거할 수 있는 경우들이 있기 때문이다.
특정 코드값이 그렇고 입력이나 수정히 데이터베이스에 들어가는 문자열에 공백이 들어가는 경우가 그렇다.
trim() 사용법은 간단한다.
String.trim()모든 공백제거 정규식
자바스크립트에서 trim()을 사용하여 공백을 제거하더라도 문자열 중간에 있는 공백은 제거되지 않는다.
모든 공백을 제거하고 싶다면 정규식을 사용하여 공백을 제거하는 방법이 있다.
정규식에 대한 내용은 나중에 다루도록 하고, 지금은 아래의 구문을 사용하면 문자열의 모든 공백을 없앨 수 있다는 것만 생각하자.
String.replace(/(\s*)/g, '')샘플코드
위에서 언급한 trim() 메서드와 정규식을 사용하여 문자열의 공백을 제거해 본다.
생각보다 쉽다.
쉽기 때문에 귀찮은 것이다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 문자열 공백 없애기</h1>
<script>
console.log("----------");
let vStr = " YG Ent 블랙핑크 ";
vStrNotTrim = "|" + vStr + "|";
console.log(typeof(vStrNotTrim), vStrNotTrim);
console.log("----------");
let vStrTrim = "";
vStrTrim = "|" + vStr.trim() + "|";
console.log(typeof(vStrTrim), vStrTrim);
console.log("----------");
let vStrAllTrim = "";
vStrAllTrim = "|" + vStr.replace(/(\s*)/g, '') + "|";
console.log(typeof(vStrAllTrim), vStrAllTrim);
</script>
</body>
</html>빈문자열인 공백이 제대로 삭제되었는지 화면출력시 특수문자를 하나 넣었다.
원본 문자열은 앞과 뒤, 중간에 공백이 있다.
trim() 을 사용했을 때 앞과 뒤 공백이 사라진 것을 확인할 수 있다.
정규식을 사용했을 때는 모든 공백이 사라진 것을 확인할 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 문자열 문자 또는 단어 추출하기 extracting string character (0) | 2021.11.12 |
|---|---|
| 자바스크립트 문자열 자리수 채우기 javascript string padding (0) | 2021.11.11 |
| 자바스크립트 문자열 합치기 using javascript string concat() method (0) | 2021.11.10 |
| 자바스크립트 문자열 대문자 소문자 변환하기 javascript string upper case lower case (0) | 2021.11.08 |
| 자바스크립트 문자열 변환 replace 함수와 정규식 사용 javascript replace and regular expresstion (0) | 2021.11.08 |
댓글