Html hyperlink body option in mailto does not support some special characters like '&'

Question

I'm using hyperlinks to provide a mailto feature, I'm dynamically creating body for the email,
Code for body

let value = 50;
let titlevar = stack overflow example
let myLink = "http://localhost:5500/abc/def.html?did=" + value + "&title=" + titlevar
let emailstring = `mailto:?Subject=Sometext&body=Click here to view my example:  %0D ` + myLink

I'm using a tag as,

<a href="` + emailstring + `">

but while opening this link, In outlook the string is breaking. I only get this, http://localhost:5500/abc/def.html?did=50

I think outlook is restricting '&' this symbol so I have tried with replacing it with comma(','), it was working as expected

And I'm having spaces in titlevar so i have tried encodeURI(titlevar) this returns stack%20overflow%20example. This is also not supporting in outlook. It is breaking at http://localhost:5500/abc/def.html?did=50,title=stack.

It is not working in outlook, I didn't try with gmail

Answer 1

You need to encode the entire url value after Subject= with encodeURIComponent.

If the subject contains HTML and/or urls themselves, then those also need to be encoded using encodeURI. Yes, this means 2 layers of encodeURIComponent for some parts.

const myLink = "http://localhost:5500/abc/def.html?did=" + value + "&title=" + encodeURIComponent(titlevar);
const body = encodeURIComponent('Click here to view my example: ' + myLink);
const emailstring = `mailto:?Subject=Sometext&body=${body}`;

The general issue is that you should always encode your strings when you are embedding them in a url. If that encoded string is embedded in another url, encode that too.