[JavaScript] encodeURIComponent()를 사용한 URI 공유

 

💥'텔레그램 링크 공유하기' 기능을 구현에 있어 '+'문자열이 무시되는 경우 발생.

https://t.me/+_abscefb1234

위와같은 링크를 아래와 같은 함수로 전달했다.

 

function shareTelegram() {
    let sendUrl = "https://t.me/_abscefb1234"; 
    window.open("https://telegram.me/share/url?url=" + "&url=" + sendUrl);
}

하지만 다음과 같이 + 가 빠진 상태로 전달되는 현상 발생

 

https://t.me/_abscefb1234

이렇게 공유가 되었다.

 

주소창에는 원하는 url이 잘 전달 되었기에 (+모바일에서는 url 문자열이 완벽히 출력됨. PC앱에서만 문제가 생김._

텔레그램 자체의 어떤 상황으로 인해 문자열에 변화가 생긴다고 짐작했다.

 

그래서 해당 문자열이 전달 될 때, 변화없이 전달 될 수 있는 방법에 대해 시도했다.

 

• " " 따옴표, ` `백틱으로 도 감싸봤지만 ❌실패❌
• 인코딩의 문제라고 생각해, +의 특수문자 코드인 &#43 으로 변경해도 ❌실패❌
• JSON.stringify() 로 전달하면 더 짱짱하게 전달 될까 싶었는데 ❌실패❌

 

그러다 찾은 S.O. 선생님의 글을 찾았다. 

https://stackoverflow.com/questions/39012852/json-stringify-replace-pluses-with-spaces

JSON.stringify replace pluses with spaces

That has nothing to do with JSON.stringify.
The conversion of + to a is done by the URL parser on the server. A + is one of the ways you can represent a space in a URL (the other being %20).
To convert text to make it safe to insert into a URL, use encodeURIComponent.

- quentin

 

해당 문제는 URL파서에 의해 공백으로 사용된다는 점. 

종종 띄워쓰기(공백)를 사용한 파일명이나 url에 + 또는 %20 등이 그 자리를 채우고 있는 것을 볼 수 있다.

 

해당문제는 해당 메서드를 활용해 해결할 수 있다.

encodeURIComponent(str)  : 주어진 문자열(str)을 URI 구성요소로서 인코딩해 새로운 문자열로 반환한다.

 

function shareTelegram() {
    let sendUrl = encodeURIComponent("https://t.me/_abscefb1234"); 
    window.open("https://telegram.me/share/url?url=" + "&url=" + sendUrl);
}

성공!