如何使用JavaScript計算包含UTF8字符的字節長度？

Question

我有一個文本框，用戶可以在其中輸入ASCII / UTF-8或兩者的組合字符。 javascript中是否有任何API，我們可以為文本框中輸入的字符計算以字節為單位的字符串長度。

就像我輸入ascii chacter一樣：mystring-長度計算為8。但是當輸入UTF8字符時，字符可以為2/3/4字節。

假設輸入的字符為：i♥u，以字節為單位的長度為5。

文本框最多可以接受31個字符的長度。 但是，如果輸入UTF8字符，它將不接受字符串：i♥ui♥ui♥ui♥ui♥u。 長度是30。

我們是否可以限制用戶輸入不超過31個字符（即使是UTF8字符）。

Answer 1

截至2018年，最兼容和最可靠的方法似乎是使用Blob API。

new Blob([str]).size

如果有人再使用它， 甚至在IE10中也受支持 。

Answer 2

實驗性的TextEncoder API可以用於此目的，但Internet Explorer或Safari不支持：

(new TextEncoder()).encode("i ♥ u i ♥ u i ♥ u i ♥ u i ♥ u").length;

另一個替代方法是對字符串進行URI編碼，計數字符和％編碼的轉義序列，如該庫中所示 ：

~-encodeURI("i ♥ u i ♥ u i ♥ u i ♥ u i ♥ u").split(/%..|./).length

github頁面有一個兼容性列表，不幸的是不包括IE10，但包括IE9。

由於無法發表評論，因此在這里我還要指出，已接受答案中的解決方案不適用於由多個UTF-16代碼單元組成的代碼點。

Answer 3

在JavaScript中，計數UTF8字節的內容很多，四處看看，您會發現許多可以提供幫助的庫（這里是一個示例： https : //github.com/mathiasbynens/utf8.js ）。 我還找到了一個線程（ https://gist.github.com/mathiasbynens/1010324 ），上面有很多專門用於utf8字節計數的解決方案。

這是該線程中最小，最准確的函數：

function countUtf8Bytes(s){
    var b = 0, i = 0, c
    for(;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
    return b
}

注意 ：我對它進行了重新排列，以使簽名更易於閱讀。 但是，它仍然是一個非常緊湊的功能，對於某些人可能很難理解。

您可以使用此工具檢查其結果： https : //mothereff.in/byte-counter

對OP的一種更正，您提供給i ♥ u的示例字符串實際上是7個字節，此函數可以正確地對其進行計數。