URL 디코드 자바스크립트

Migel Hewage Nimesha 2024년2월15일
  1. URL 인코딩 및 디코딩의 필요성
  2. JavaScript의 URL 디코딩
  3. 결론
URL 디코드 자바스크립트

이 문서에서는 URL 디코딩과 JavaScript를 사용하여 인코딩된 URL을 디코딩하는 방법을 살펴봅니다.

URL 인코딩 및 디코딩의 필요성

URL에 포함되어야 하는 특정 문자가 있습니다. URL에는 0~9의 숫자, a~z의 문자와 같은 US-ASCII 문자와 일부 특수 문자가 포함될 수 있습니다.

그러나 일부 URL에는 US-ASCII에 없는 문자나 특수 문자가 있을 수 있습니다. 그럴 때 URL 인코딩이 필요합니다.

URL 인코딩을 사용하면 US-ASCII 테이블 외부에 특수 문자가 있더라도 적절한 형식, 즉 허용되는 형식의 URL을 가질 수 있습니다.

아래 예를 참조하십시오.

http://example.us/url encoding

위의 URL에서 URL과 인코딩 사이에 공백이 있어 URL 형식에 허용되지 않습니다. URL을 인코딩할 때 공백은 일부 특수 문자로 대체되며 URL은 올바른 형식이 됩니다.

URL 디코딩을 사용하여 인코딩된 URL을 디코딩할 수 있습니다. 이 프로세스는 URL 인코딩의 반대입니다.

URL을 디코딩할 때 더 읽기 쉬운 방식으로 URL을 가질 수 있습니다.

JavaScript의 URL 디코딩

JavaScript에는 인코딩된 URL을 디코딩하는 세 가지 방법이 있습니다.

  1. unescape() 메서드
  2. decodeURI() 메서드
  3. decodeURIComponent() 메서드

unescaped() 메서드를 사용하여 인코딩된 URL 디코딩

이 메서드는 JavaScript에서 더 이상 사용되지 않습니다. 즉, JavaScript에서 함수가 사용되지 않습니다. 이 함수를 사용하는 대신 다른 두 가지 옵션을 사용하여 인코딩된 URL을 디코딩할 수 있습니다.

decodeURI() 메서드를 사용하여 인코딩된 URL 디코딩

JavaScript에는 URL을 인코딩하는 encodeURI() 메서드와 인코딩된 URL을 디코딩하는 decodeURI() 메서드가 있습니다. encodeURI() 메서드는 주소의 도메인 관련 부분(HTTPS, 도메인 이름 등) 없이 URL 주소를 인코딩합니다.

decodeURI()는 인코딩된 URL을 일반 문자로 디코딩하는 encodeURI()의 반대 메서드입니다. 다음은 decodeURI()encodeURI() 메서드의 구문입니다.

통사론:

// Syntax for encoding
encodeURI(content to encode)

// Syntax for decoding
decodeURI(content to decode)

디코딩 프로세스를 보려면 인코딩된 URL이 있어야 합니다. 샘플 URL을 살펴보겠습니다.

http://example.us /url encoding

첫 번째 단계로 URL을 변수에 아래 문자열로 할당해야 합니다.

let exURL = ' http://example.us /url encoding';

그런 다음 encodeURI() 메서드를 사용하여 인코딩하고 console.log() 메서드를 사용하여 인쇄합니다.

let encodedURL = encodeURI(exURL);
console.log(encodedURL);

위의 명령문에서 encodeURI() 메서드를 encodedURL이라는 변수에 할당했습니다. 다른 방법으로는 아래와 같이 console.log() 함수 내부에서 encodeURI() 함수를 직접 사용할 수 있습니다.

console.log(encodeURI(exURL));

두 방법 모두 동일한 결과를 제공하므로 첫 번째 경로로 이동하겠습니다. 이제 완전한 JavaScript 코드는 다음과 같아야 합니다.

전체 코드:

let exURL = 'http://example.us /url encoding';
let encodedURL = encodeURI(exURL);
console.log(encodedURL);

출력:

encodeURI() 메서드 사용

이제 decodeURI() 메서드를 사용하여 디코딩해 보겠습니다. 먼저 decodeURI() 프로세스를 아래와 같이 다른 변수에 할당할 수 있습니다.

let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);

출력:

decodeURI() 메서드 사용

보시다시피 위의 프로세스에서 디코딩된 URL을 얻습니다.

decodeURIComponent() 메서드를 사용하여 인코딩된 URL 디코딩

decodeURIComponent() 메서드는 encodeURIComponent() 메서드의 반대 메서드입니다. encodeURIComponent() 메서드는 도메인 관련 부분으로 URL 주소를 인코딩합니다.

또한 encodeURI() 메소드가 수행하지 않는 특수 문자 세트를 인코딩합니다. 고유 캐릭터 목록은 다음과 같습니다.

고유 문자 목록

decodeURIComponent() 접근법은 인코딩된 URL을 관련 문자 및 기호로 디코딩합니다.

통사론:

// Syntax for encoding
encodeURIComponent(content to encode)

// Syntax for decoding
decodeURIComponent(content to decode)

예시 URL을 살펴보겠습니다.

https://stackoverflow.com/url+encoded string+in javascript

위의 예에서 URL 내에 공백, /, :+ 표시가 있습니다. encodeURIComponent() 메서드를 사용하여 URL을 인코딩해 보겠습니다.

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';
let encoded = encodeURIComponent(exURL);
console.log(encoded);

출력:

encodeURICompoenent() 메서드 사용

이제 아래와 같이 decodeURIComponent() 메서드를 사용하여 디코딩해 보겠습니다.

let decoded = decodeURIComponent(encoded);
console.log(decoded);

위와 같이 decodeURIComponent() 메서드를 변수에 할당했습니다. console.log() 메소드를 사용하여 인쇄하십시오.

출력:

decodeURIComponent() 메서드 사용

보시다시피 우리가 인코딩한 URL이 디코딩된 URL로 주어졌습니다.

전체 코드:

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';

let encoded = encodeURIComponent(exURL);
console.log(encoded);

let decoded = decodeURIComponent(encoded);
console.log(decoded);

결론

이 기사에서는 JavaScript를 간략하게 소개하고 URL 인코딩 및 디코딩이 무엇인지 설명했습니다. 그런 다음 decodeURI()decodeURIComponent()라는 두 가지 방법을 몇 가지 예와 함께 주로 논의했습니다.

두 가지 방법 모두 요구 사항에 따라 적합한 방법을 사용하기 위해 두 가지 방식으로 작동합니다. unescape() 메서드는 최근 사용되지 않으며 대신 다른 두 메서드를 솔루션으로 사용할 수 있습니다.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.