JavaScript：HTML實體轉換器（實體到UNICODE＆CSS轉義）

Question

我想輸入一個HTML實體到字段中，當我點擊提交時，讓它有各自的UNICODE和CSS「內容」代碼，但我缺少有些事情：

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" 
    }); 

}); 

Answer 1

爲HTML實體安全，準確地解碼成原始的Unicode的符號，就像一個瀏覽器將使用the he.decode(string) functionality附帶the he library：

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

---

到非ASCII字符轉換成CSS轉義序列後，使用cssesc：

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

---

這裏有一個jsFiddle顯示這在行動：https://jsfiddle.net/mathias/fbp7bftk/