jquery .text() and unicode

Question

I'd like to display the "Open Lock" character in my HTML link text.

If I do it directly it shows up correctly with <a id="myId">&#x1f512;</a>, but I found no way to change it dinamically with the jQuery .text() function, like in:

 $("#myID").text(openLockText);

What should I put in openLockText?

Solution 1

Javascript internally only supports UTF-16.

Because this is an extended 32-bit UTF character (not in the "Basic Multilingual Plane") you need to insert the "UTF-16 surrogate pair", which is helpfully provided on the same page that you linked to:

0xD83D 0xDD13

i.e.

$('#myId').text('\ud83d\udd13');

More details can be found in RFC 4627, which is strictly speaking the format for JSON.

Solution 2

edited — If it were a Unicode code point that could be represented in a single UTF-16 character, then ou could use JavaScript escape sequences in such situations:

$('#foo').text('\uXXXX');

However, because your character requires more bits, that doesn't work. It would probably be possible to construct the byte sequence that'd allow the character to be represented as UTF-16, but it'd be a pain. I'd go with .html().

Note that not all fonts provide glyphs for "exotic" code points like that, and in my experience those that do provide incredibly ugly ones.

Solution 3

You can put the character there directly, as a quoted string, e.g.

$("#myID").text('🔓');

provided that the file is UTF-8 encoded and you properly declare the character encoding. (In theory, you could alternatively use UTF-16 or even UTF-32, but browsers should not be expected to support them.)

Although support to non-BMP characters directly in source documents is optional according to the ECMAScript standard, modern browsers let you use them. Naturally, you need an editor that can handle UTF-8, and you need some input method(s); see e.g. my Full Unicode Input utility.

The question contains some mistakes that have gone unnoticed: Since id attribute values are case-sensitive, the spelling myId needs to be fixed to myID. And the OPEN LOCK character is U+1F513, not U+1F512, so the reference 🔒 would give a wrong character.

Moreover, very few fonts contain OPEN LOCK, and browsers, especially IE, may have difficulties in finding the glyph even if some font in the system contains it, so you should give browsers help and declare a list of fonts known to contain the character, in order of preference. Example:

<style>
#myID { font-family: Symbola, Quivira, Segoe UI Symbol; }
</style>
<a id="myID">stuff</a>
<script>
 $("#myID").text('🔓');
</script>

A non-BMP character is internally represented as a surrogate pair, and it could be written using \u notations for the components of the pair, but this is very unintuitive

Solution 4

Following script should convert UTF32 hex values to UTF16 pairs

function toUTF16Pair(hex) {
  hex = hex.replace(/[&#x;]/g,'');
    var x = parseInt(hex, 16);
    if (x >= 0x10000 && x <= 0x10FFFF) {
        var first = Math.floor((x - 0x10000) / 0x400) + 0xD800;
        var second = ((x - 0x10000) % 0x400) + 0xDC00;
        return {
            first: first.toString(16).toUpperCase(),
            second: second.toString(16).toUpperCase(),
          combined: '\\u'+first.toString(16).toUpperCase() + '\\u'+second.toString(16).toUpperCase()
        };
    } else {
        return {}
    }
}

<input type='text' id='in' />
<input type='button' value='Click' onclick="document.getElementById('result').innerHTML = toUTF16Pair(document.getElementById('in').value).combined" />
<p id='result'></p>

View more solutions