Question

I am able to dynamically produce an Unicode character and insert it into a <div> by using sequences like ð, but now I want to retrieve this input as an escape sequence, not the character itself.

Please see this JSFiddle example:

<button id="insertDh">insert funny d to mytext</button>
<div id="mytext"><i>mytext: please click button above</i></div>
<hr>
<textarea id="theSource"></textarea>
<button id="getSource">get mytext's source</button>

$("#insertDh").click(function() {
    $("#mytext").html("&#x00f0;");
});

$("#getSource").click(function() {
   $("#theSource").val($("#mytext").html()); 
});​

In other words, when I click “get mytext’s source”, I want to fill in the textarea with ð and not ð. Is this possible? If so, how?

Answer 1

$("#theSource").val(
    $("#mytext").html()
    // Replace non-ascii code-points with HTML entities.
    .replace(
      /[\ud800-\udbff][\udc00-\udfff]|[^\x00-\xff]/g,
      function (nonAscii) {
        var codepoint;
        if (nonAscii.length === 1) {  // A single basic-plane codepoint.
          codepoint = nonAscii.charCodeAt(0);
        } else {  // A surrogate pair representing a unicode scalar value.
          codepoint = 0x10000 + (
            ((nonAscii.charCodeAt(0) & 0x3ff) << 10)
             | (nonAscii.charCodeAt(0) & 0x3ff));
        }
        return '&#x' + codepoint.toString(16) + ';';
      }));