React 실행오류 - URIError: URI malformed

 

 

 

상황인즉슨 이렇다. 

검색 서비스를 개발 중이었다. 검색창 내에 특수기호를 넣고 검색하면 에러가 발생했다.

실례지만 뉘신지요

 

 

쉽게 말해서

검색어를 입력하고 엔터를 뙇 치면, URL 에 ?search={검색어 키워드} 형식으로 반영이 되는 구조였다.

 

검색어를 맨처음 window.location.search 로 받아오면 인코드된 문자열로 보인다

 

 

하지만 웹사이트에서 "가독성" 을 위해서는 읽기 쉽게 디코드해줘야 된다. 그래서 나는 디코드를 해줬다.

const searchURL = decodeURIComponent(window.location.search);

즉, /search?search=캐릭터 와 같다

 

 

하지만 여기에 #, % 같은 몇몇 특수 문자가 들어가면 에러가 터지게 된다. 

나는 문제해결을 위해 머리를 굴려 보았다.

 

일단 디코드 해준 것을 몽땅 다 인코드해줄 순 없다. 그렇기에 특수문자만 쏙 골라내어 인코드 해주기로 하였다. (feat. 정규식)

function getSearchKeyword () {
    const specialRegex = /[^a-zA-Z가-힣0-9\s]/g;
    const searchURL = decodeURIComponent(window.location.search)
    const keyword = window.location.search.replace('?search=', '');

    // 다른 건 내비두고 특수문자만 인코드해주자
    const encodedSpecial = keyword.replace(
      specialRegex,
      encodeURIComponent
    );

    const newURL = searchURL.replace(
      /?search=([^&]+)/g,
      `?search=${encodedSpecial}`
    );

	return newURL;
}