URL에서 Query Parameter(Query String)에 있는 특수문자가 섞인 값을 추출하기

개요

URL에서는 &나 ?와 같은 특수문자들은 URL의 구조를 정의하는 데 사용되는 문자들로 Query Paramter에 값으로 보내거나 하면 잘못된 URL로 변형되어 지므로 해당 특수문자들을 보내고 싶을 땐 인코딩을 해서 보내야한다. 하지만 인코딩이 안되서 날아온 쿼리 파라미터의 값에서 특수문자가 존재하는 상황일 때 어떻게 특수문자가 섞인 값을 잘 추출해 나갈 것인지를 해결해보자.

 

http://localhost:3000/detail?name=heewon&code=g<i&4%t?i223>

위와 같은 URL이 있다고 가정하고 여기서 name은 상관없지만 code의 g<i&4%t?i223>"을 추출하려면 어떻게 해야할까?

 

1. window.location.href로 전체 URL을 얻기

window.location.href로 URL 전체를 출력해보면 밑과 같이 출력된다.

http://localhost:3000/detail?name=heewon&code=g%3Ci&4%t?i223%3E%22

여기서 보면 뭔가 변형?이 되어있다. 구체적으로 어떤 부분이 변형이 됬는지 보면

• > 가 %3E
• " 가 %22
• < 가 %3C

위와 같은 자동적으로 인코딩이 일어났다. 왜 이 3가지의 문자만 인코딩이 일어나는지에 대해서는 URL에 대해 좀 더 자세히 알아볼 때로 미루고 우선 어떻게해야 인코딩이 안된 값을 취득할 수 있는지에 집중하자.

 

2. code의 value를 추출해 내는 로직 작성

const decodeSpecialChars = (encodedStr: string) => {
  const charMap: { [key: string]: string } = {
    '%3E': '>',
    '%22': '"',
    '%3C': '<',
  };

  for (let encoded in charMap) {
    const regex = new RegExp(encoded, 'g');
    encodedStr = encodedStr.replace(regex, charMap[encoded]);
  }

  return encodedStr;
};

const queryString = window.location.href.split('?').slice(1).join('?');
if (queryString) {
  const decodedQueryString = decodeSpecialChars(queryString);
  const nameParam = decodedQueryString.split('&')[0].split('name=')[1];
  const codeParam = decodedQueryString.split('&').slice(1).join('&').split('code=')[1];
}

• window.location.href.split('?').slice(1).join('?') 는 window.location.href.split('?')로 http://localhost:3000/detail의 부분을 구분내고 slice('1')로 ["name=heewon&code=g<i&4%t", "i223>"] 배열 전체부분을 얻어낸다(code의 값에 ?가 포함되어 있기 때문에 이렇게 복잡하게 추출해 낼 수 밖에 없었다) 그리고 join('?')으로 나누어진 부분들을 다시금 합치면 name=heewon&code=g<i&4%t?i223 을 얻어낼 수 있다.
• 하지만 얻어낸 name=heewon&code=g<i&4%t?i223을 실제로 출력해보면 자동인코딩으로 인해서  name=heewon&code=g%3Ci&4%t?i223%3E%22 로 되어 있을 것이다. 이를 decodeSpecialChars를 이용해 다시금 원래의 문자열의 형태로 얻어낸다.
• 그렇게해서 nameParam과 codeParam을 처음에 설정했던 본연의 URL의 쿼리 파라미터 값을 얻을 수 있다.