動態插入通過JavaScript爲CSS轉義的HTML實體

我試圖動態創建與不同HTML實體對應的data-*屬性的HTMLElements列表，然後由CSS拾取並用作僞元素內容，如下所示：動態插入通過JavaScript爲CSS轉義的HTML實體

li:after { 
    content: attr(data-code); 
}

這樣做的問題是，attr()正確呈現實際的實體，而不是字面的代碼是prefix said code with &#x - 典型的\不起作用。

所以所需的輸出HTML是這樣的：<li data-code="&#xENTITY"></li>。當直接添加到HTML時，這與我的CSS規則完全相同。轉義的實體被放置在頁面中的:after psuedo元素上，並呈現爲實體圖標。

這裏的事情變得好奇...

如前所述，我試圖創建和注入通過JavaScript（通過列表迭代）這些li小號動態，而這也正是該障礙發生。

var entities = [{code: '&#x1F602'}, ...]; 
    for (var i = 0; i < entitites.length; i++) { 
    var entity = entitites[i], 
     listItem = document.createElement('li'); 

    listItem.setAttribute('data-code', entity.code); 
    list.appendChild(listItem); 
    }

的li正確添加到DOM利用設定成格式正確的實體它就會由我的CSS規則回升。但是，不是呈現實體圖標，而是顯示代碼！

enter image description here

注意上面的圖片中，呈現的第一項是明確的頁面上的HTML。第二個項目通過JS注入（使用完全相同的代碼），然後通過CSS給出:after元素。 Chrome的網頁檢測器甚至以不同的方式呈現它！

enter image description here

即使奇怪之處還在於，我可以通過WebInspector編輯HTML和手動進逃脫data-*屬性 - 鉻STILL呈現正確的圖標！

enter image description here

我不知所措就在這裏，因此任何指導，將不勝感激！

來源

2015-07-10 Jordan Foreman

HTML實體符號只會被HTML解析器解析。如果您的data-code屬性在JavaScript中是「天生的」，那麼您需要使用JavaScript表示法來獲取所需的Unicode字符。而不是☺笑臉，在JavaScript中使用\u263A（反斜槓，小寫「u」和四個十六進制數字）。

無論您的data-code屬性是直接編碼到您的HTML源代碼（使用HTML實體表示法），還是使用JavaScript（使用JavaScript表示法）創建的，到屬性值爲DOM的一部分時，它就是Unicode。

現在，當您的字符超出16位範圍時，情況會變得更加複雜，因爲JavaScript在處理這些問題時非常糟糕。你可以在http://www.fileformat.info/info/unicode/上查找你的代碼點，這會給你你需要的「C/C++/Java」UTF-16代碼對。例如，你的「歡樂的眼淚」面對是"\uD83D\uDE02"。

來源

2015-07-10 19:14:42 Pointy

這適用於常規線條笑臉，但不適用於此處記錄的擴展「emoji」集：http：//apps.timwhitlock.info/unicode/inspect/hex/1F602 - 也許這是另一個特定於此字符集的問題？ –

@JordanForeman我剛剛完成更新問題 - 請參閱編輯。 – Pointy

而且做到了！太棒了！感謝您的幫助@Pointy！ –

動態插入通過JavaScript爲CSS轉義的HTML實體

回答

相關問題