JavaScript에서 URL 인코딩이 필요한 이유
웹 개발에서 URL에는 공백, 한글, 특수문자 등이 포함될 수 있으며, 이러한 문자는 그대로 전송할 경우 오류가 발생할 수 있습니다. JavaScript에서는 encodeURI() 메서드를 사용하면 URL을 안전하게 인코딩할 수 있습니다.
encodeURI() 메서드란?
encodeURI()는 URI 전체를 인코딩하는 함수로, URL 구조를 유지하는 :/?#[]@!$&'()*+,;= 같은 예약 문자는 그대로 두고 나머지 문자만 변환합니다.
사용 예제
아래 코드를 실행하면 버튼 클릭 시 URL이 인코딩되어 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">인코딩</button>
<p id="demo"></p>
<script>
function display() {
var encode = "welcome msg.jsp?name=amit&sub=programming";
var result = encodeURI(encode);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>실행 결과
버튼을 클릭하면 다음과 같이 공백이 %20으로 변환된 결과가 출력됩니다.
welcome%20msg.jsp?name=amit&sub=programming
참고: encodeURI()와 encodeURIComponent()의 차이
URL 전체를 인코딩할 때는 encodeURI()를, 쿼리 스트링의 값처럼 일부 문자열만 인코딩할 때는 encodeURIComponent()를 사용하는 것이 좋습니다. encodeURIComponent()는 &, = 같은 예약 문자까지 모두 인코딩하기 때문입니다.