JavaScript에서 문자열의 공백을 %20(URL 인코딩)으로 변환하는 방법

웹에서 URL에 공백이 포함되면 브라우저는 자동으로 모든 공백을 %20이라는 문자열로 대체합니다. 이는 URL 내에서 공백이 유효한 문자가 아니기 때문이며, 이를 안전하게 전송하기 위해 퍼센트 인코딩(percent encoding) 방식으로 변환하는 것입니다.

문제 정의

문자열을 첫 번째이자 유일한 인수로 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 원본 문자열에서 공백(whitespace)이 있던 자리를 모두 %20으로 대체한 새로운 문자열을 생성하여 반환해야 합니다.

예시

입력 문자열이 다음과 같다면 −

const str = 'some extra Space';

출력 결과는 다음과 같아야 합니다 −

const output = 'some%20extra%20%20Space';

위 예시에서 주목할 점은 extra와 Space 사이에 공백이 두 개 있었기 때문에 %20%20처럼 연속으로 치환된다는 것입니다.

구현 코드

이 문제는 문자열을 한 글자씩 순회하면서 공백인지 확인하고, 공백이라면 %20으로, 그렇지 않다면 원래 문자를 결과 문자열에 추가하는 방식으로 해결할 수 있습니다.

const str = 'some extra Space';

const replaceWhitespace = (str = '') => {
  let res = '';
  const { length } = str;
  for(let i = 0; i < length; i++){
    const char = str[i];
    if(!(char === ' ')){
      res += char;
    } else {
      res += '%20';
    }
  }
  return res;
};

console.log(replaceWhitespace(str));

코드 설명

결과를 담을 빈 문자열 res를 초기화합니다.
for 반복문으로 입력 문자열의 각 문자를 순서대로 확인합니다.
현재 문자가 공백(' ')이 아니라면 그대로 res에 추가합니다.
공백이라면 대신 %20을 추가합니다.
모든 문자를 처리한 후 완성된 문자열을 반환합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다 −

some%20extra%20Space

대안: replace()와 정규표현식 활용

같은 작업은 String.prototype.replace() 메서드와 정규표현식을 사용하면 더 간결하게 처리할 수도 있습니다.

const replaceWhitespace = (str = '') => {
  return str.replace(/ /g, '%20');
};

console.log(replaceWhitespace('some extra Space'));
// some%20extra%20Space

정규표현식에서 /g 플래그는 전역(global) 검색을 의미하며, 이를 통해 문자열 내 모든 공백이 한 번에 치환됩니다.

마무리

URL 인코딩은 웹 개발에서 매우 자주 마주치는 개념입니다. 실무에서는 직접 구현하기보다 encodeURIComponent() 같은 내장 API를 사용하는 것이 일반적이지만, 인코딩의 동작 원리를 이해하기 위해 위와 같은 알고리즘 문제를 풀어보는 것도 큰 도움이 됩니다.