如何使用javascript计算包含UTF8字符的字节长度？

Question

我有文本框,用户可以在其中输入ASCII/UTF-8中的字符或两者的组合.在javascript中是否有任何API我们可以计算在文本框中输入的字符的字符串长度(以字节为单位).

就像我输入ascii字符一样,让我们​​说:mystring - 长度将计算为8.但是当输入UTF8字符时,字符可以是2/3/4字节.

让我们说输入的字符:i♥u,字节长度为5.

文本框可以接受最多31个字符的长度.但如果输入了UTF8字符,它将不接受字符串:i♥ui♥ui♥ui♥ui♥u.长度是30.

即使对于UTF8字符,我们是否可以限制用户输入不超过31的字符.

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 字节计数的解决方案。

\n\n

这是该线程中最小且最准确的函数：

\n\n

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

\n\n

注意：我稍微重新排列了它，以便签名更容易阅读。然而，它仍然是一个非常紧凑的函数，对于某些人来说可能很难理解。

\n\n

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

\n\n

对你的OP的一处更正，你提供的示例字符串i \xe2\x99\xa5 u实际上是7个字节，这个函数确实正确地计算了它。

\n