[jQuery] 제이쿼리 공백제거 모든방법(trim,정규식)

자바스크립트, 제이쿼리 문자열 공백제거 방법(trim, 정규식)

 

공백제거는 개발을 하면서 많은 로직에 사용됩니다.

jQuery에서 trim() 이라는 내장함수를 사용하여도 되고,

정규식을 사용하여 공백을 제거할 수 도 있습니다.

 

공백제거가 필요한 경우는 언제인가요?

1. 검색기능에서 공백제거를 사용하여 파라미터를 전송할 경우.

-> 입력을 받는 입력창에서는 사용자가 어느것을 입력하기 예측하기 힘듭니다.

공백이 포함되어 원하는 검색결과가 나오지 않을 수 도 있습니다.

그렇기 떄문에 로직에 맞춰 공백을 제거할 수 있습니다.

 

2. url주소나, 입력받은 데이터를 공백없이 변환이 필요한 경우

-> 주소변환시나, 데이터 공백없이 저장이 필요한 경우 공백제거가 필요합니다.

 

 

jQuery trim()을 사용하여 공백제거

jQuery 에서 지원하는 trim()을 사용하여 공백을 제거할 수 있습니다.

하지만 trim()은 문자열의 앞뒤만 제거하기 때문에 완벽하게 공백제거를 하기에는 문제가 있습니다.

문자열 중간에 공백제거 없이 앞뒤 공백만 제거가 필요한 경우 간단하게 사용할 수 있습니다.

사용방법은 str.trim(), 또는 $.trim() 으로 간단하게 사용 가능합니다.

아래 결과를 보듯이 문자의 앞뒤 부분이 공백제거된 내용을 확인 할 수 있습니다.

var str = "  안녕 하세요 @@  ";

console.log("str 출력");
console.log("str 길이 : " + str.length);
console.log(str);

// 문자열.trim();
console.log("str.trim() 출력");
console.log("str.trim() 길이 : " + str.trim().length);
console.log(str.trim());

// $.trim(문자열);
console.log("$.trim(str) 출력");
console.log("$.trim(str) 길이 : " + $.trim(str).length);
console.log($.trim(str));

 

정규식을 이용한 공백제거 하는 방법

문자열 전체 공백제거

문자열 앞공백만 제거

문자열 뒤공백만 제거

문자열 앞뒤공백만 제거

 

정규식을 사용하여 문자열의 모든 공백을 제거해보겠습니다.

 var str = "  안녕 하세요 @@  ";
 console.log(str);
 console.log(str.replace(/\s/gi, ""));
 

-> 콘솔창에 찍어보니 공백부분이 잘보이지 않아 드래그로 긁었습니다.

앞뒤, 그리고 문자열 중간부분의 공백이 모두 제거되었습니다.

 

문자열 앞부분만 공백만 제거

var str = "  안녕 하세요 @@  ";
console.log(str.replace(/^\s*/, ""));

-> 문자열 앞의 부분만 공백 제거 처리가 되고 뒷부분은 공백은 그대로 입니다.

 

 

문자열 뒷부분만 공백 제거

var str = "  안녕 하세요 @@  ";
console.log(str.replace(/\s*$/, ""));

-> 문자열 앞부분은 공백 그대로, 문자열 뒷부분은 공백제거 되었습니다.

 

 

정규식을 이용한 문자열 앞뒤 공백제거

var str = "  안녕 하세요 @@  ";
console.log(str.replace(/(^\s*)|(\s*$)/g, ""));

-> 문자열 앞뒤 공백제거, 중간부분은 공백이 제거 되지 않았습니다.

 

상황에 맞게 공백제거를 하여 사용하시면 됩니다.

다음 포스팅에서 뵐게요!