[JavaScript] 공백(빈공간) 문자 제거하기, 없애기, 정규표현식 사용

PHP나 다른 언어처럼 trim()함수가 존재해 모든 공백을 자동으로 삭제해준다면 좋겠지만 자바스크립트(javascript)에는 공백제거 함수가 없습니다... 

그래서 정규표현식을 사용하거나 jQuery등의 메소드등을 사용해야하죠. 그럼, 문자열에 포함된 공백을 삭제해야 할때 자바스크립트의 정규표현식과 jQuery를 사용하는 방법인 trim() 메소드에 대하여도 함께 알아보겠습니다.

 

! 공백 삭제(제거)는 언제 필요한가요?

그렇다면 공백제거는 언제 사용할까요? 공백 제거를 하는 이유는 수도 없이 많겠지만 아래와 같이 꼭 필요한 경우가 있을 것입니다.

i. 웹페이지에 검색 기능을 구현할 경우 
입력값에 두개 이상의 빈공간등이 실수로 들어간 경우 등 다양한 오류를 방지하기 위해 제거하거나 하나로 바꾸어 입력하는기 위한 경우

ii. 게시판 글을 짧게 만들어 간략하게 보여줄 때...
예를들면 '더 알아보기' 등의 간략한 내용의 요약을 보여줄때 안에 있는 띄어쓰기와 많은 공백들을 줄이기 위한 목적으로 사용

iii. Url주소나 쿼리스트링, 파라미터 주소에 포함된 빈공간을 변경시
현재의 url 주소나 입력받은 주소등을 변경할 경우에 사용. 또한 이메일을 입력값의 잘못된 공백을 자동으로 제거하기 위함.


사실 위에 언급된 경우를 제외하고도 공백 제거는 웹개발의 많은 부분에서 필요할 것입니다. 그럼 아래부터는 실제로 웹사이트에서 구현되는 공백제거를 수행하는 방법과 예제를 더 자세하게 알아보도록 하겠습니다.

 

! jQuery를 이용한 trim() 메소드의 사용

; trim() 함수를 사용하면 문자열의 앞과 뒤에 있는 공백을 제거할 수 있습니다.
"문자열의 앞과 뒤의 공백만 제거!!"중간에 위치한 공백을 제거할 수는 없지만 맨 앞과 뒤에만 삭제가 필요한 경우 중간에 위치한 공백이 필요한 경우 더 유용할 수도 있겠습니다. 

사용자가 이력한 값을 폼으로 전송받을 때 중복 조건으로 공백을 사용할 수 있겠죠. 이런 경우는 맨 앞 그리고 뒤 공백만 제거가 필요합니다.

그럼 어떻게 사용하는지 간단한 사용방법을 알아보겠습니다.

trim('해당문자열')
 

# trim() 메소드 사용예제 소스보기(앞과 뒤의 공백을 없애기 위한 방법)

<script type="text/javascript">
    var test = '   웹이즈프리 닷컴     ';
    test.trim(); // 앞과 뒤의 공백만 제거

   console.log(test);
</script>

"웹이즈프리 닷컴"
// 중간의 공백만 남기고 앞과 뒤의 공백은 모두 제거됨

참고로 trim() 메소드는 아래와 같은 방법으로도 사용이 가능하며 사용 방법상의 차이일뿐 구현되는 결과는 동일합니다.

$.trim('해당문자열')

 

! 정규표현식을 사용한 공백 제거 방법

; trim() 메소드는 매우 유용한 방법이지만 중간의 공백을 제거할 수 없습니다. 사실 대부분의 서버사이드 언어인 trim() 함수는 대부분 비슷하게 처음과 끝부분만 공백을 제거하는 기능을 가집니다.

하지만 만약, 중간의 공백을 제거하거나 더 다양한 방법이 필요하다면? 어떻게 해야할까요? 당연히 정규표현식을 사용하여야 할 것입니다. 우선 정규표현식을 사용한 공백제거 방법을 알아보자.

 

! 문자열에 위치한 모든 공백을 제거하는 예제

앞에서 언급한 것처럼 처음과 끝 뿐만아니라 만약 중간에 있는 모든 공백도 함께 제거할 경우 어떻게 해야할까요?

여러분이 알고 있는 것처럼 정규표현식(Regular Expression)을 사용하는 방법이 가장 효과적이고 편리한 방법입니다

그렇다면 실제로는 어떻게 사용하는지 아래의 정규표현식 예제와 함께 알아보세요.
 

<script type="text/javascript">
   var regText = "   123   45 6   ";
   // 문자열을 regText변수에 저장함

   px;">regText.replace(/ /gi, '');
   // 모든 공백을 제거

   console.log(regText);
</script>

참고로 위에 있는 스크립트 정규식 코드는 아래와 같은 방법으로도 사용할 수도 있습니다. 아래 코드는 공백을 s로 바꾸었는데 s는 정규표현식에서 공백을 의미하는 코드로 사용됩니다. 이점을 기억하세요.
 

<script type="text/javascript">
   var regText = "    123 45 6  ";

   regText.replace(/s/gi, ''); 
   // 위와 같이 모든 공백을 제거

   console. log(regText);
</script>

둘 다 결과는 아래와 같이 모든 공백을 제거하여 다음과 같이 출력될 것입니다.
 

'abcdef' // 모든 공백이 제거됨

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

위에 사용된 s는 공백을 의미하듯 정규표현식에서는 수 많은 기호가 예약어로 사용될 수 있으며 이를 활용하여 정규표현식을 더 간단하고 쉽게 만들 수 있습니다.

이렇게 사용되는 문법 기호는 굉장히 많습니다. 이 글의 하단에 대표적인 내용을 정리하도록 하겠습니다. 꼭 확인해 보세요.

 

!! 맨 앞에 위치한 공백만 제거하는 예제

<script type="text/javascript">
    var px;">regText= ' 123 456 ';
    px;">regText.replace(/^ /gi, ''); // 공백으로 시작된 부분만 제거
</script>

'123 456 ' // 앞에 시작된 공백만 제거됨

!!! 문자열 맨 뒤의 공백만 제거하는 예제

<script type="text/javascript">
    regText = ' abc def ';
    regText.replace(/&#92;*$/gi, ''); // 문자열 맨 뒤의 공백만 제거
</script>

' 123 456' // 뒤에 위치한 공백만 제거됨

참고로 아래는 자주 쓰이는 정규표현식 기호입니다.

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

더 자세한 내용이 궁금하시면 아래 링크를 참고해보세요.

[출처] http://webisfree.com/blog/?titlequery=javascript-%EA%B3%B5%EB%B0%B1-%EB%B9%88%EA%B3%B5%EA%B0%84-%EB%AC%B8%EC%9E%90-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0--%EC%97%86%EC%95%A0%EA%B8%B0--%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-%EC%82%AC%EC%9A%A9