編碼圖標字體HTML實體

我正在使用FontAwesome，並希望從包含圖標的元素中讀取編碼的HTML實體。例如，假設我有這樣的HTML DOM中：編碼圖標字體HTML實體

<span class="fa">&#xf005;</span>

我如何從一個元素讀取值回來了，？ innerHTML給出瞭解碼後的字符。

Mathias Bynen的圖書館he.js完美地處理了這個問題，但對於客戶端項目而言，它包含了很多重要的內容（〜85kb unminified！），我想要一個輕量級的解決方案，不一定需要掩蓋每一個邊緣情況。

這裏是一個說明該問題的小提琴：http://jsfiddle.net/ohfuffm9/

來源

2014-09-11 WickyNilliams

經過一番挖掘，我發現this gist在線哪種做我想做的，除了它期望實體爲十進制值。我把它清理了一下（略微不尋常的代碼風格原始），並修改爲處理十六進制值。

// encode(decode) html text into html entity (assuming entity is hex) 
var HtmlEntity = { 
    decode : function(str) { 
    return str.replace(/&#x([0-9A-F]+);/gi, function(match, dec) { 
     return String.fromCharCode(parseInt(dec, 16)); 
    }); 
    }, 

    encode : function(str) { 
    var buf = []; 
    for (var i = 0, length = str.length; i < length; i++) { 
     buf.push("&#x" + str[i].charCodeAt().toString(16) + ";"); 
    } 
    return buf.join(""); 
    } 
}; 

var entity = '&#x9ad8;&#x7ea7;&#x7a0b;&#x5e8f;&#x8bbe;&#x8ba1;'; 
var str = '高級程序設計'; 
console.log(HtmlEntity.decode(entity) === str); // true 
console.log(HtmlEntity.encode(str) === entity); // true

這可以很容易地修改，以處理十六進制和十進制的實體，而是我的使用情況是非常有限的，所以我選擇不。

這裏是一個小提琴，顯示預期的結果：http://jsfiddle.net/ohfuffm9/4/

來源

2014-09-11 11:36:50 WickyNilliams

字符引用是由瀏覽器解析HTML源代碼時進行處理，並存儲只是在DOM的解釋字符。沒有辦法找回標記中的原始字符串。但是，如果您知道元素內容是單個代碼點，如U + F005，則無論HTML代碼中的代碼點如何表示，您都可以將該代碼點作爲字符值處理JavaScript的。您可以將數字代碼點值設爲icon.innerHTML.charCodeAt(0)。該值以十進制表示，例如61445。如果需要，將其轉換爲十六進制。而且你甚至可以通過在十六進制值前後添加一些字符來構造字符串。但通常情況下，與角色一起工作會更簡單。

來源

2014-09-11 11:10:11

這是有用的信息，謝謝。經過一番挖掘，我把一個工作解決方案放在一起。看到我的答案。我贊成讓我走上正確的道路 – WickyNilliams 2014-09-11 11:37:20

編碼圖標字體HTML實體

回答

相關問題