如何使用純 Javascript 將 unicode 字符轉換為 HTML 數字實體

Question

我正在嘗試將帶有特殊字符的 innerHTML 轉換為原始的 &#...; 實體值，但似乎無法使其適用於 unicode 值。 我哪里錯了？

該代碼試圖采用“Orig”-對其進行編碼並將其放入“Copy”中....

原文： 1:🙂__2:𝌆__3:ß__4:Ü__5:X__6:Y__7:팆__8:Z__9:⚠️__10:⚠️__11:⚠__12:🙂

副本：1:🙂 __2:𝌆 __3:ß__4:Ü__5:X__6:Y__7:팆__8:Z__9:⚠️__10:⚠️__11:⚠__12:🙂

......但顯然可怕的黑色鑽石正在出現！

 if (!String.prototype.codePointAt) { String.prototype.codePointAt = function(pos) { pos = isNaN(pos) ? 0 : pos; var str = String(this), code = str.charCodeAt(pos), next = str.charCodeAt(pos + 1); // If a surrogate pair if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) { return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000; } return code; }; } /** * Encodes special html characters * @param string * @return {*} */ function html_encode(s) { var ret_val = ''; for (var i = 0; i < s.length; i++) { if (s.codePointAt(i) > 127) { ret_val += '&#' + s.codePointAt(i) + ';'; } else { ret_val += s.charAt(i); } } return ret_val; } var v = html_encode(document.getElementById('orig').innerHTML); document.getElementById('copy').innerHTML = v; document.getElementById('values').value = v; //console.log(v);

 div { padding:10px; border:solid 1px grey; } textarea { width:calc(100% - 30px); height:50px; padding:10px; }

 Orig:<div id='orig'>1:🙂__2:𝌆__3:ß__4:Ü__5:X__6:Y__7:팆__8:Z__9:⚠️__10:&#9888;&#65039;__11:&#9888;__12:&#128578;</div> Copy:<div id='copy'></div> Values:<textarea id='values'></textarea>

（jsfiddle 可在https://jsfiddle.net/Abeeee/k6e4svqa/24/ 獲得）

我已經通過了關於如何使用普通 JavaScript 將字符轉換為 HTML 實體的各種建議，包括看起來最有利的 he.js，但是當我下載該腳本時，它無法編譯（第 32 行附近的意外令牌：. .var encodeMap = <%= encodeMap %>;)。

我不知道該怎么辦。

Answer 1

Javascript 字符串是 UTF-16。 代理范圍內的一個字符占用兩個 16 位字。 字符串的length屬性是 16 位字的計數。 因此"🙂".length將返回 2。

codePointAt(i)不是第i個字符，而是第i個 16 位字。 因此，代理字符將出現在兩個連續的codePointAt調用中。 從規范來看，如果"🙂".toString(0)是高代理，該函數將返回代碼點值，即 128578，但"🙂".toString(1)將僅返回較低代理 56898，即黑色菱形.

因此，如果codePointAt返回一個高代理，您需要跳過一個位置。

按照規范中的示例，不是遍歷字符串中的每個 16 位字，而是使用循環遍歷每個字符的方法。 for let (char in aString) {}就是這樣做的。

 function html_encode(s) { var ret_val = ''; for (let char of s) { const code = char.codePointAt(0); if (code > 127) { ret_val += '&#' + code + ';'; } else { ret_val += char; } } return ret_val; } let v = html_encode(document.getElementById('orig').innerHTML); document.getElementById('copy').innerHTML = v; document.getElementById('values').value = v;

 div { padding:10px; border:solid 1px grey; } textarea { width:calc(100% - 30px); height:50px; padding:10px; }

 Orig:<div id='orig'>1:🙂__2:𝌆__3:ß__4:Ü__5:X__6:Y__7:팆__8:Z__9:⚠️__10:&#9888;&#65039;__11:&#9888;__12:&#128578;</div> Copy:<div id='copy'></div> Values:<textarea id='values'></textarea>