본문 바로가기

Javascript/Javascript중급

문자열의 공백 제거하기

반응형

문자열 데이터는 원 데이터를 그대로 사용하기 보다는 가공을 해서 원하는 형태로 변경한 후 사용하는 경우가 더 많습니다.

문자열에서 가장 문제가 많은 것은 공백 문자입니다.



문자열 앞뒤의 공백 제거


입력 폼에서 사용자 입력을 받은 경우, 또는 엑셀에서 셀 데이터를 복사해서 붙여넣은 데이터를 가져온 경우 가장 흔하게 발생하는 문제가 문자열 앞, 뒤, 사이에 있는 공백입니다.


공백은 1개일 수도 있고, 여러개 일 수도 있기 때문에 다양한 공백 형태에 대응할 수 있도록 구현을 하는 것이 중요합니다.


먼저 문자열의 앞뒤 공백을 제거합니다.


문자열 메서드로 trim() 이 있습니다.

문자열 맨앞과 맨뒤의 공백을 모두 제거해줍니다.


' 문자열 입력 공백 제거 테스트      '.trim(); // '문자열 입력 공백 제거 테스트' 반환





trimStart(), trimEnd()


trim() 외에


ES2015 부터 추가된 앞쪽만 공백을 제거하는 trimStart()(trimLeft()), 또는 뒤쪽만 공백을 제거하는 trimEnd()(trimRight()) 메서드도 있습니다.


다만, 인터넷익스플로러에서는 지원되지 않기 때문에 호환성을 위해 필요한 경우에는 추천하지 않으며, 별도로 프로토타입으로 메서드를 구현해 사용하는 것을 추천합니다.


String.protytype.ltrim(){
    return this.replace(/^\s+/,''); //문자열 시작 위치부터 1개 이상의 공백을 제거
};

String.protytype.rtrim(){
    return this.replace(/\s+$/,''); // 문자열 끝의 1개 이상의 공백을 제거
};




문자열에 있는 모든 공백 제거


문자열 안에 있는 모든 공백을 제거하려면 정규식(Regular Expression)을 사용해야 합니다.


String.replace(/\s/g'');



  • \s: 공백
  • /g: 문자열 전체

를 의미하는 정규식입니다.


' 문자열 입력 공백 제거 테스트      '.replace(/\s/g, ''); // '문자열입력공백제거테스트' 반환


정규식을 사용하지 않으려면 공백을 기준으로 문자열을 쪼갰다가, 다시 붙이는 방법을 사용할 수 있습니다.


String.split(' ').join('');





문자열에 있는 2개 이상의 붙은 공백을 1개로 줄이기


문자열 전체에서 2개 이상의 연달아 있는 공백을 1개로 줄입니다.

정규식은 "/공백공백+/g" 와 같이 공백을 두개를 넣어야 합니다.


replace(/  +/g' ');


반응형

닫기