JavaScript: HTML entity converter (Entity to UNICODE & CSS escaped)

Question

I would like input an HTML entity into the field, and when I click on submit, to have it's respective UNICODE and CSS "content" code, but I am missing some things:

http://jsfiddle.net/nadqnhbc/3/

HTML

<h1>Convert HTML entities into UNICODE & CSS</h1>

<p>Example: Enter &amp;#128038; into the field.</p>
<input type="text" name="ampWhat">
<br>
<input id="submit" type="submit" value="Submit">


<div id="result">
    <span id="result-unicode"></span>
    <span id="result-css"></span>
</div>

JS

window.addEventListener("DOMContentLoaded", function () {

    document.getElementById("submit").addEventListener("click", function () {
        var entity = document.getElementById("ampWhat").value;
        alert(entity); //Code to convert into UNICODE: U+1F426 OR CSS: "/01F426"
    });

});

Mathias Bynens · Accepted Answer · 2015-05-08 08:18:49Z

1

To safely and accurately decode HTML entities into the original Unicode symbols, just like a browser would, use the he.decode(string) functionality that comes with the he library:

var input = 'Enter &#128038; into the field.';
var decoded = he.decode(input);
console.log(decoded);
// → 'Enter 🐦 into the field.'

To convert the non-ASCII characters into a CSS escape sequence later, use cssesc:

var escaped = cssesc(decoded);
console.log(escaped);
// → 'Enter \1F426  into the field.'

Here’s a jsFiddle showing this in action: https://jsfiddle.net/mathias/fbp7bftk/

edited May 8, 2015 at 8:18

answered May 6, 2015 at 6:16

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omar Juvera Over a year ago

I got lost trying to download it. Can it be added to jsFiddle?

Mathias Bynens Over a year ago

@Omar jsFiddle link added.

Collectives™ on Stack Overflow

JavaScript: HTML entity converter (Entity to UNICODE & CSS escaped)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related