Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×
  • 0

How to solve the double slashes issue?


Go to solution Solved by Malkuth,

Question

I have these two files on the server.

EM01.JPG.374f52b53ae10be5280d5db9ee369b43.JPG

The UTF8.JS was taken from: 

https://github.com/mathiasbynens/utf8.js

 

The INDEX.HTML is:

<!DOCTYPE html>
<html>
    <head>
        <title>emoji</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="utf8.js"></script>
    </head>

    <body>
        <button onclick="show()">Show Emoji</button>
        <p id="emoji"></p> 
        <script>
            function show() {
                var i = 0;
                var text = "";
                var code = "";
                for (i = 151; i <= 152; i++) {
                    code = "\\xf0\\x9f\\xa4\\x" + i.toString(16);
                    text += utf8.decode(code) + " ";
                }
                document.getElementById("emoji").innerHTML = text;
            }
        </script>
    </body>
</html>    

 

When I run, it displays:

EM02.JPG.6f8c9742dfe5e09a3a006cceeea63ba0.JPG

(If I use single slash, nothing will be displayed on web page)

 

If I changed portion of the code to: (without double slash)

text=utf8.decode("\xf0\x9f\xa4\x97");
document.getElementById("emoji").innerHTML = text;

 

EM03.JPG.45ff5e4ab7be4c62dda6506a0250b37d.JPGThen I will get the correct emoticon!

 

My issue is no matter I put double slash or single slash, the FOR loop won't display the emoticon.

How to solve this?

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 1
  • Solution

Hey, nice question.

The reason it doesn't work is 

'\x{8-bit value}'

is a literal character in itself. Think of doing

const val = 'a0';
'\x' + val;

is something similar of trying to do

'\' + 'n';

For newline. It won't work because it's supposed to be a single character. If that's not clear, think of trying to create a "B" character with  "I" + "3". It doesn't work like that.

But there is a great JavaScript built-in String method called fromCharCode (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCodethat uses UTF-16 (instead of UTF-8 which you're trying to do here) which we can use to produce the same effect. See how that method works in the link. Also, try not to use 'var' anymore. Use 'const' by default but if you need to change the variable, use 'let'. Read about them and why here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declarations. And also you don't need the utf8 library. Take a look at this code here:

 

<!DOCTYPE html>
<html>
    <head>
        <title>emoji</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <button onclick="show()">Show Emoji</button>
        <p id="emoji"></p> 
        <script>
            function show() {
                let text = "";
                for (let i = 56832; i <= 56833; i++) {
                    let code = String.fromCharCode(55357, i); // Refer here for the UTF-16 value https://nowsms.com/download/emoticons.htm and you can convert it (hexadecimal to decimal) which is useful if you want to do a loop
                  	//The above line is similar as: let code = String.fromCharCode(0xD83D, 0xDE01);
                    text += code + " ";
                }
                document.getElementById("emoji").innerHTML = text;
            }
        </script>
    </body>
</html>  

 

Feel free to ask if it's not clear. Hope my explanation is good enough. 

 

 

  • Like 1
Link to post
Share on other sites
  • 1

after do some search for "f09fa497"

hugging face (U+1F917)

Quote

Unicode Code Point     U+1F917
Script     Common
Category     Other Symbol
Block     Supplemental Symbols and Pictographs
HTML Entity (Decimal)     &#129303;
HTML Entity (Hexadecimal)     &#x1F917;
URL Escape Code     %F0%9F%A4%97

"\xf0\x9f\xa4\x97"
after url escape code will become "%F0%9F%A4%97"
which will show hugging face in html document.

 

you can just do a "convert" from "\\xF0\\x9F\\xA4\\x97" to "%F0%9F%A4%97"

			// reference
			// https://stackoverflow.com/questions/66868729/javascript-decode-hex-string-with-backslash
			function decode( code ) {
				var decode = decodeURIComponent( code.replace(/\\x/g, '%'));
				console.log( code );
				console.log( decodeURIComponent( decode ) );
			}

			function test() {
				var i = 0;
				var text = "";
				var code = "";
				for (i = 151; i <= 152; i++) {
					code = "\\xf0\\x9f\\xa4\\x" + i.toString(16);
					decode( code );
				}
			}
   
   

🙂

 

 

 

   
   
   
   
  • Like 2
Link to post
Share on other sites
  • 0
15 hours ago, Malkuth said:

Hey, nice question.

The reason it doesn't work is 

'\x{8-bit value}'

is a literal character in itself. Think of doing

const val = 'a0';
'\x' + val;

is something similar of trying to do

'\' + 'n';

For newline. It won't work because it's supposed to be a single character. If that's not clear, think of trying to create a "B" character with  "I" + "3". It doesn't work like that.

But there is a great JavaScript built-in String method called fromCharCode (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCodethat uses UTF-16 (instead of UTF-8 which you're trying to do here) which we can use to produce the same effect. See how that method works in the link. Also, try not to use 'var' anymore. Use 'const' by default but if you need to change the variable, use 'let'. Read about them and why here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declarations. And also you don't need the utf8 library. Take a look at this code here:

 

<!DOCTYPE html>
<html>
    <head>
        <title>emoji</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <button onclick="show()">Show Emoji</button>
        <p id="emoji"></p> 
        <script>
            function show() {
                let text = "";
                for (let i = 56832; i <= 56833; i++) {
                    let code = String.fromCharCode(55357, i); // Refer here for the UTF-16 value https://nowsms.com/download/emoticons.htm and you can convert it (hexadecimal to decimal) which is useful if you want to do a loop
                  	//The above line is similar as: let code = String.fromCharCode(0xD83D, 0xDE01);
                    text += code + " ";
                }
                document.getElementById("emoji").innerHTML = text;
            }
        </script>
    </body>
</html>  

 

Feel free to ask if it's not clear. Hope my explanation is good enough. 

 

 

Thanks for the great answer, it works as expected: https://qrcodeonline.000webhostapp.com/emoji/

I have studied what is UTF-8, but no ideas about UTF-16, although I understand it is wide-characters or string longer than two bytes (surrogate pair).  It is surprising that I do not need the UTF8.JS library anymore.

  • Like 1
Link to post
Share on other sites
  • 0
8 minutes ago, flashang said:

after do some search for "f09fa497"

hugging face (U+1F917)

 

you can just do a "convert" from "\\xF0\\x9F\\xA4\\x97" to "%F0%9F%A4%97"


			// reference
			// https://stackoverflow.com/questions/66868729/javascript-decode-hex-string-with-backslash
			function decode( code ) {
				var decode = decodeURIComponent( code.replace(/\\x/g, '%'));
				console.log( code );
				console.log( decodeURIComponent( decode ) );
			}

			function test() {
				var i = 0;
				var text = "";
				var code = "";
				for (i = 151; i <= 152; i++) {
					code = "\\xf0\\x9f\\xa4\\x" + i.toString(16);
					decode( code );
				}
			}
   
   

🙂

 

 

 

   
   
   
   

 

Regex is another good way to achieve this. Great answer!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...