//HTML: Converting to Unicode characters

<New code>

HTML &#74;
— shows the character with unicode #74, or 'J'

Each character has a code number

For example:

The origins of these codes go back decades, and more and more characters are being added to Unicode all the time, particularly for non-European languages.

Javascript keyboards read the Unicode number instead of the actual symbol pressed.

This is good in many ways. For example, string comparisons in if statements are slower than numerical comparisions.

However, if you want to display which key was pressed, you have to convert it into an HTML code that can be displayed. You do this by adding &# in front of the Unicode number, and ; after, and this will display in HTML as the actual unicode character.

For example: &#74; will display J in HTML.

In Javascript you can create the HTML code with:

var unicodeCharacter = "&#" + unicodeNumber + ";";

Basic example: A number to character convertor

Convert unicode (UTF-8) numbers to their characters

Unicode number:

This character: " ", can be coded in HTML as: &# ;

...is made from:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My unicode to character converter</title>
        <meta name="description" content="Display a unicode character given the code number">
        <meta name="author" content="Dave Drapak">
        <!--
            Change log:
                5. Oct 2015     - created!                                      - Drapak
                21. March 2017  - moved to script to bottom for better style    - Drapak
                27. Oct 2018    - updated style and clarified code              - Drapak
        -->
        <style>
            span { font-weight: bold; }
        </style>
    </head>

    <body>
        <h3>Convert unicode (UTF-8) numbers to their characters</h3>
        <p>
            Unicode number: 
            <input id="inputId" type="text" value="72">
            <button id="buttonId">Convert number to character</button>
        </p>
        <p>
            This character: "<span id="unicodeCharacterId"> </span>", 
            can be coded in HTML as: 
            <code>&amp;#<span id="unicodeNumberId"> </span>;</code>
        </p>

        <script>
            var convertUnicode = function () {
                console.log("in convertUnicode...");
                
                //INPUT: read the input line 
                var unicodeNumber       = document.querySelector( '#inputId' ).value;
                
                //PROCESS: create the HTML code to display the unicode character
                var unicodeCharacter    = "&#" + unicodeNumber + ";";
                
                //OUTPUT: output the raw unicodeNumber
                document.querySelector( '#unicodeNumberId ').innerHTML      = unicodeNumber;
                
                //OUTPUT: output the unicode character
                document.querySelector( '#unicodeCharacterId' ).innerHTML   = unicodeCharacter;
            }
            
            //INPUT: trigger convertUnicode when the button is clicked or tab/enter is hit.
            document.querySelector( '#inputId' ).onchange   = convertUnicode;
            document.querySelector( '#buttonId' ).onclick   = convertUnicode;
        </script>
    </body>
</html>

Learn more