[java script] 공백(빈공간) 제거하기

빈공간 제거는 언제 필요한가요?

1. 웹페이지 검색기능을 구현하는 경우 
- 이 경우 입력폼에 두개 이상의 빈공간이 실수로 들어가는 등 다양한 오류를 사전에 방지하기 위한 목적이거나 또는 둘 이상의 공백을 하나로 바꾸어 처리함

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

3. 백쪽에서 해달라고 했을때
- 해달라면 해줘야 한다.

 

1. 문자열 앞 뒤 공백만 제거하기

trim() 

문자열의 앞 뒤 만 제거 할 수 있습니다. ( 중간부분은 제거 불가 , 중간공백은 2번을 참고해주세요.)

 공백제거 해주는 trim() 내장함수가 자바스크립트에는 존재하지 않아 공백제거를 위한 다른 방법을 사용해야 합니다.
그런 이유로 정규표현식을 사용하거나 아니면jQuery에서 지원하는 trim() 메소드등을 사용해야합니다. 

코드

1. 예제

var test = "   lily 블로그     ";
// 방법 1
test.trim(); // 앞과 뒤의 공백만 제거

// 방법 2
$.trim(test)

console.log(test);

 

2. 결과

"lily 블로그"

 

참고 : 브라우저에 따라 trim() 함수가 작동하지 않는 경우가 있습니다. 이때는 2번의 replace()함수와 정규식을 이용해
앞뒤의 공백을 제거해줍니다.

// 맨 뒤 공백만 제거
regText = " abc def ";
regText.replace(/\s$/gi, ""); // 문자열 맨 뒤의 공백만 제거

// 맨 앞 공백만 제거
var regText= " 123 456 ";
regText.replace(/^ /gi, ""); // 공백으로 시작된 부분만 제거

//앞 뒤 공백제거
let test = " 문자열의 앞 뒤 공백 제거하기    ";
console.log(test.replace(/^\s+|\s+$/gm,''));

 

replace() 함수를 이용해 function name이 trim 인 함수를 만들어 볼 수도 있습니다.

function trim() {
  return this.replace(/(^\s*)|(\s*$)/gi, "");
}
testStr.trim();

 

2. 정규식을 이용한 공백제거

replace();

test.replace(searchvalue, newvalue)

replace() 함수는 searchvalue와 newvalue 두개의 파라미터를 받습니다.
searchvalue의 값으로는 문자열 또는 정규식을 넣을 수 있습니다.

 

코드

 

1. 예제

var regText = "    123 45 6  ";
regText.replace(/\s/gi, "");     // 위와 같이 모든 공백을 제거

console. log(regText);

 

2. 결과

"123456"

 

자주쓰는 정규식 기호

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

2.

c