Received this response from the webserver:
"\ud83d\ude48\ud83d\ude02\ud83d\ude30\ud83d\ude09\ud83d\udc4f\ud83c\udffd\ud83d\udc4c\ud83c\udffd\ud83d\udd1d\u2714\ufe0f\ud83d\ude42 \344\366\374\337\u015b\u0161"
After decoding, it should look like this:
πππ°πππ½ππ½πβοΈπ ÀâüΓΕΕ‘
The characters Àâüà are encoded as octal literals \344\366\374\337
To display the plain text message correctly without encoding, I used:
{{ JSON.parse('"' + messageContent.message + '"') }}
Although this method worked for escaped Unicode values, a problem arose when encountering octal literals. ES6 does not support octal literals and throws an error. To address this, I used regex to identify octal literals and then parsed them using:
String.fromCharCode(parseInt(parseInt(val.replace('\\', ''), 8), 10))
. The process was tedious especially during parsing Unicode characters using JSON.parse(`"${val}"`)
.
I also noticed that directly displaying the server response with {{ response.message }}
results in a normal string representation. However, assigning the same value to a new variable and displaying it with {{ message }}
, shows the decoded emojis πππ°πππ½ππ½πβοΈπ.
Additionally, my algorithm for parsing text is not foolproof; sometimes it fails especially when dealing with skin color changes in emojis, resulting in incorrect parsing of Unicode messages.
If necessary, backend modifications can be made. However, considering the mobile app integration, any changes should not disrupt their functionality.
Any assistance or guidance on optimizing this process would be greatly appreciated.