JavaScript에서는 문자열에 포함된 공백(whitespace)을 제거할 수 있는 다양한 방법이 있습니다. 이 글에서는 문자열 속 공백 문자를 처리하는 대표적인 네 가지 기법을 실제 동작하는 코드 예제와 함께 차근차근 소개합니다.
- 반복문(for loop) 사용하기
- 배열 메서드 활용: split / filter / join
- 배열 메서드 활용: split / join
- replace 메서드와 정규표현식 활용
1. 반복문(for loop)으로 공백 제거하기
for 반복문을 사용할 때는 반복문 실행 전에 새로운 문자열 변수를 미리 선언해 두어야 합니다. 그래야 반복문을 돌면서 조건에 맞는 문자들을 하나씩 누적해서 담을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//loop
let newStr = "";
for(let i = 0; i < str.length; i++) {
if(str[i] !== " ") {
newStr += str[i];
}
}
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
이 반복문은 문자열의 각 문자를 하나씩 검사하면서 해당 문자가 공백인지 확인합니다. 공백이 아니라면 newStr 변수에 그 문자를 추가합니다. 여기서는 결과를 화면에 바로 보여주기 위해 DOM(Document Object Model)에 삽입했지만, 코드의 다른 부분에서 결과를 활용해야 한다면 newStr 변수를 return 하면 됩니다.
2. split / filter / join 메서드로 공백 제거하기
앞서 살펴본 반복문 방식과 원리는 비슷하지만, 배열 메서드를 활용하면 훨씬 간결하게 처리할 수 있습니다. 먼저 split으로 문자열을 배열로 분리한 뒤, ES6의 filter 메서드로 공백을 걸러내고, 마지막에 join으로 다시 하나의 문자열로 합치는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/Filter
const splitted = str.split('');
const filtered = splitted.filter(char => {
return char !== " ";
})
let newStr = filtered.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
3. split / join 메서드만으로 공백 제거하기
사실 배열 메서드를 사용한다면 filter 없이 split과 join만으로도 충분합니다. 문자열을 공백을 기준으로 분리한 후, 각 요소를 이어 붙이기만 하면 되기 때문입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
//split/join
const splitted = str.split(' ');
let newStr = splitted.join('');
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
꽤 유용한 숏컷이죠! 원하는 문자를 기준으로 split하면 해당 문자가 문자열에서 완전히 잘려 나가고, join으로 배열을 다시 합치면 공백이 제거된 깔끔한 문자열을 얻을 수 있습니다.
4. replace 메서드와 정규표현식으로 공백 제거하기
replace 메서드는 정규표현식(RegEx)과 함께 사용하면 문자열의 모든 공백을 한 번에 제거할 수 있는 강력한 도구입니다. replace는 기본적으로 찾은 첫 번째 값만 치환하기 때문에, 문자열에 공백이 여러 개 있으면 첫 번째 공백만 사라집니다. 따라서 모든 공백을 제거하려면 반드시 정규표현식을 사용해야 합니다.
정규표현식 끝에 붙는 전역 플래그(g flag) 덕분에 한 번 이상 등장하는 모든 공백을 검색하고 치환할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
<script>
const handleSubmit = str => {
let regex = /\s+/g;
let newStr = str.replace(regex, "");
document.getElementById("demo").innerHTML = newStr;
}
</script>
</head>
<body>
<h1>Whitespace Filter</h1>
<input id="demoString" value="" type="text" name="inputString" placeholder="I'm a string"/>
<input type="submit" onclick="handleSubmit(demoString.value)"/>
<div id="demo"></div>
</body>
</html>
여기서 \s는 공백 문자를 의미하고, +는 하나 이상 연속된 공백 문자 그룹을 찾겠다는 뜻입니다. 그리고 표현식 맨 끝의 g(global) 플래그는 문자열 전체에서 여러 개의 공백 그룹을 모두 찾아 치환하도록 만들어 줍니다. 참고로 위 예제에서는 선언한 정규표현식을 str.replace(regex, "")처럼 실제로 적용해야 모든 공백이 제거된다는 점에 유의하세요.
마무리
이번 글에서는 JavaScript에서 문자열의 공백을 제거하는 네 가지 방법을 살펴봤습니다. 반복문, filter 메서드, split/join 메서드, 그리고 정규표현식까지 상황에 맞게 선택해 사용할 수 있습니다. 이런 기본기를 탄탄히 다져두면, 앞으로 JavaScript를 학습하면서 마주치는 더 복잡한 문제들도 자신 있게 해결할 수 있을 것입니다!