CODEWITHSUNDEEP
htmlurlescapingencodeuricomponentdecodeuricomponent
d3wannabe
d3wannabe

Reputation: 1317

encode/decodeURI for URLs with quotes

I'm having trouble displaying links to URLs with quotes in them and can't figure out a solution despite a load of examples on stackoverflow! Here's the exact string I'm storing in my database (shows Adelaide Antartica)

https://www.google.com/maps/place/67%C2%B007'27.3%22S+68%C2%B008'56.0%22W/@-67.1447827,-68.3886741,71373m/data=!3m1!1e3!4m5!3m4!1s0x0:0x0!8m2!3d-67.124258!4d-68.148903

When I just try putting that into a href it links to...

https://www.google.com/maps/place/67%C2%B007 (i.e. breaks at the first single quote)

But I try using href="encodeURI(theLink)" or href="encodeURIComponent(theLink)" it links to the same thing (I even tried the decode options in case I was thinking about it the wrong way and had the same problem).

Does anyone have a recommendation on the best way to proceed here? I even tried the deprecated "escape" function which also won't work for me. Thanks for any thoughts at all!

(p.s. funnily enough as I'm writing this I see that even Stack Overflow's link is broken in exactly the same way - maybe it's not even possible?!)

EDIT: As requested by Clemzd - I'm using d3 to construct the links, so doing this...

anElement.append("text").html("<a href='" + myData[i].url + "'> a link name </a>");

Works great on everything but links with a single quote regardless of whether I do encodeURI(myData[i].url) or not

Upvotes: 0

Views: 4927

Answers (2)

Clemzd
Clemzd

Reputation: 945

There are many ways to solve your issue. All you need to know is if your input may contains ' then you have to escape this character. Otherwise you will get something like anElement.append("text").html("<a href='" + https://www.google.com/maps/place/'link + "'> a link name </a>"); That can't be parsed because of the '.

If you are sure that your link will never contains " then change your code and use " instead as a concatenaion operator.

If not, you can escape ' in server side or client side. For example in client side you can do :

function escapeJavascript(input){
 return input.replace(/\\n/g, "\\n")
        .replace(/\\'/g, "\\'")
        .replace(/\\"/g, '\\"')
        .replace(/\\&/g, "\\&")
        .replace(/\\r/g, "\\r")
        .replace(/\\t/g, "\\t")
        .replace(/\\b/g, "\\b")
        .replace(/\\f/g, "\\f");
}

And then use it like this: anElement.append("text").html("<a href='" + escapeJavascript(myData[i].url) + "'> a link name </a>");

Upvotes: 1

zayjuc
zayjuc

Reputation: 311

You use single quotes to delimit the value of the href attribute, so that value cannot contain unescaped single quotes. That's an issue with HTML markup encoding, not URL encoding.

You can either reverse your use of single and double quotes (encoded URLs cannot contain double quotes, but they can contain single quotes) or replace the single quotes in the URL with a character entity like &#39;. URL encoding by %27 would also work, but that's not a standard encoding that encodeURIComponent does.

Upvotes: 3

Related Questions