[HTML][JS] 특수문자(&, + 등)등을 get 방식으로 넘기기

위 그림에서 "HTML + 자바스크립트: 30일 완성" 제목을 클릭하면 해당 도서의 상세한 정보가 들어있는 페이지로 이동하게 됩니다. 이동하는 방식은 GET 방식으로 도서 이름(HTML + 자바스크립트: 30일 완성)을 인자로 하여 넘깁니다. 문제는 제목중 '+'가 들어있어서 서버에서 받을때는 '+'가 공백으로 변환되어 받는 문제가 발생하였습니다.

HTML + 자바스크립트: 30일 완성
=>
HTML 자바스크립트: 30일 완성

 

변환되는 이유는 '&'와 '+'는 GET 방식일때 웹에서 쓰이는 지정된 문자이기 때문입니다.

 

해결방법

1. replace 함수로 특수문자를 코드로 변환해주는 방식

<a href="/Library/book/detail?book_name=${book.book_name}" class="book">
	${book.book_name}
</a>

<script type="text/javascript">
	function replace(url){
		url = url.replace(/&/g,"%26");
		url = url.replace(/\+/g,"%2B");
		return url;
	}
	const books = document.querySelectorAll(".book");
	
	books.forEach((item)=>{
		item.href = replace(item.href);
	});
</script>

2. POST 방식으로 요청

POST 방식으로 요청하면 인자에 특수문자가 그대로 넘어갑니다.

 

References

Source Code : https://github.com/yonghwankim-dev/library/commit/dab6902ee0495d2601eee3f88cec9139e01a46e6

https://blog.naver.com/PostView.naver?blogId=geewonjung&logNo=221347758535&redirect=Dlog&widgetTypeCall=true&directAccess=false