JavaScript로 문자열의 슬래시를 백슬래시로 변환하는 방법

문자열 처리 작업을 하다 보면 경로 구분자처럼 특수 문자를 다른 문자로 교체해야 하는 경우가 자주 발생합니다. 이번 글에서는 문자열에 포함된 모든 슬래시(/)를 백슬래시(\)로 변환하는 JavaScript 함수를 직접 작성해 보겠습니다.

문제 정의

요구 사항은 다음과 같습니다. 슬래시가 포함된 문자열을 입력으로 받아, 모든 슬래시를 백슬래시로 교체한 새로운 문자열을 반환하는 함수를 만드는 것입니다.

예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.

const str = 'Th/s str/ng /conta/ns some/ forward slas/hes';

구현 예제

아래 코드는 문자열을 한 글자씩 순회하면서 슬래시를 만나면 백슬래시로 교체하는 방식입니다.

const str = 'Th/s str/ng /conta/ns some/ forward slas/hes';

const invertSlashes = str => {
  let res = '';
  for(let i = 0; i < str.length; i++){
    if(str[i] !== '/'){
      res += str[i];
      continue;
    }
    res += '\\';
  }
  return res;
};

console.log(invertSlashes(str));

코드의 동작 원리를 살펴보면 다음과 같습니다.

• 결과를 담을 빈 문자열 res를 준비합니다.
• for 반복문으로 문자열의 각 문자를 하나씩 확인합니다.
• 현재 문자가 슬래시가 아니라면 그대로 res에 추가합니다.
• 현재 문자가 슬래시라면 대신 백슬래시('\\')를 추가합니다.

참고로 자바스크립트에서 백슬래시는 이스케이프 문자이므로, 문자열 리터럴 안에서 표현하려면 '\\'처럼 두 번 연속으로 작성해야 합니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

Th\s str\\ng \\conta\\ns some\\ forward slas\\hes

더 간단한 방법: replace()와 정규식 활용

반복문 없이 replace() 메서드와 정규식을 사용하면 한 줄로 동일한 결과를 얻을 수 있습니다.

const result = str.replace(/\//g, '\\');
console.log(result); // Th\s str\\ng \\conta\\ns some\\ forward slas\\hes

여기서 /\//g는 슬래시 문자를 의미하는 정규식이며, 마지막의 g 플래그는 문자열 전체에서 일치하는 모든 문자를 교체하도록 합니다. 플래그를 생략하면 첫 번째 슬래시만 교체되므로 주의해야 합니다.

마치며

이번 예제에서는 반복문과 replace() 정규식 두 가지 방법으로 슬래시를 백슬래시로 변환하는 방법을 살펴보았습니다. 같은 원리를 응용하면 백슬래시를 슬래시로 되돌리는 것도 str.replace(/\\/g, '/')처럼 손쉽게 처리할 수 있습니다. 상황에 맞는 방법을 선택해 활용해 보시기 바랍니다.