JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    
    <head>
        <script type="text/javascript" language="javascript">
            function testMe() {
                var output = document.getElementById('output');
                output.innerHTML = '';
                var str = "πŒ†av34πŒ†";
                var pos = Math.floor(Math.random() * 6)
                output.innerHTML += "'" + str + "'.ucLength == " + str.ucLength() + '<br/>';
                var codePoint = str.codePointAt(pos);
                output.innerHTML += "str.codePointAt(" + pos + ") == " + codePoint + '<br/>';
                output.innerHTML += "String.fromCodePoint(" + codePoint + ") == '" + String.fromCodePoint(codePoint) + "'" + '<br/>';
                output.innerHTML += "str.ucCharAt(" + pos + ") == '" + str.ucCharAt(pos) + "'" + '<br/>';
                var start = Math.floor(Math.random() * 12) - 8; // -5 to +5
                var stop = Math.floor(Math.random() * 12) - 8; // -5 to +5
                var ucSlice = str.ucSlice(start, stop);
                output.innerHTML += "str.ucSlice(" + start + "," + stop + ") == '" + ucSlice + "'" + '<br/>';
                output.innerHTML += "str.ucIndexOf('" + ucSlice + "') == " + str.ucIndexOf(ucSlice) + '<br/>';
                output.innerHTML += "str.ucLastIndexOf('" + ucSlice + "') == " + str.ucLastIndexOf(ucSlice) + '<br/>';
            }
        </script>
    </head>
    
    <body>
        <input type='submit' onclick="testMe();" />
        <div id='output'></div>
    </body>

</html>

JavaScript

/*
Within this script I will refer to the representation of code points as
symbols rather than characters. To javascript, a character is a 16-bit
code value. A single code point might be represented by two code values 
in javascript and therefore all javascript String functions treat it as 
two 'characters' when only a single 'symbol' is being described.

Because javascript exposes strings as though they're encoded as UCS-2
(see http://mathiasbynens.be/notes/javascript-encoding) single code 
points above a certain range must be represented with two 16-bit code 
values. For example, the symbol "πŒ†", whose code point is 119558, is 
represented as two code values (two characters):

"πŒ†".length == 2
"πŒ†".charCodeAt(0) == 55348 == 0xD834
"πŒ†".charCodeAt(1) == 57094 == 0xDF06

But symbols with lower code points are represented with only a single 
code value. Thus, the programmer can only rely on String.length, 
String.codeCharAt() and String.fromCharCode() if he knows that the 
strings involved contain only symbols with lower code points.

Steven Levithan <http://slevithan.com/> has provided fixes in the form 
of String.codePointAt() and String.fromCodePoint() at 
https://gist.github.com/2290602. Those functions do not work exactly as 
expected because they still treat the string as having a length 
determined by 16 bit code values. For example, getting the code point of
"πŒ†" at index 0 returns the expected code point 119558, but one can also
get the code point at index 1, which returns 57094. The "πŒ†" symbol is
still treated as though it has a length of 2. Based on Steven's work
I have rewritten those functions to treat each string as though its
length were determined by the number of code points (symbols) not the 
number of 16-bit code values (characters).

Within these functions, while a lead surrogate should always be 
followed by a tail surrogate, we'll REQUIRE that this is the case
because it is possible to record a code point in the range reserved for 
lead and tail...