HTML SMS message body. Everything after & symbol disappears

Question

I'm currently developing a web app and there is this part of the code where I have to pre-populate the message in the sms box. So my code looks like this:

    <a href="sms:?body=This is the message with & symbol">SMS</a>

In the pre-populated message, everything from the & symbol onwards does not appear in the message box on the phone. I know I have to encode it but I do not know what the encoding code is. Any solution to this? Thanks.

Answer 1

This seems really crazy but encoding the body twice does the trick.

<a href="sms:?body=hello & stuff">not encoded (doesn't work)</a>
<a href="sms:?body=hello%20%26%20stuff">uri component encoded (doesn't work)</a>
<a href="sms:?body=hello%2520%2526%2520stuff">double uri component encoded (works fine)</a>

Working fiddle to test from an android device: https://jsfiddle.net/k96g2h48/

Answer 2

Android and iOS respond to slightly different syntaxes. To put & inside the body of text, iOS needs URL encoding. For Android, it requires double encoding as mentioned in @Crisman's answer. check the below code:

<a href="sms:&body=hi%26bye">iOS</a>
<br>
<a href="sms:?body=hello%2520%2526%2520stuff">double uri component encoded (works fine)</a>

The first link worked in iOS and the second link works in Android. Notice the syntax of both URLs. & and ? with this they with & ios distinguish between number and body part whereas ? is used to separate number and body.

An example with number is like

<a href="sms:123456&body=hi%26bye">iOS</a>
<br>
<a href="sms:123456?body=hello%2520%2526%2520stuff">double uri component encoded (works fine)</a>

You can also try this fiddle

Answer 3

Encode your & character because it has a special meaning in an URL ( it is the separator for fields)

<a href="sms:?body=This+is+the+message+with+%26+symbol">SMS</a>

The characters that have a special meaning in URL need to be ecnode if you just want there text respresentation.

wikipedia on percent encoding