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

Question

我有文本框，用户可以在其中输入ASCII / UTF-8中的字符或两者的组合。在javascript中是否有任何API我们可以计算在文本框中输入的字符的字符串长度。

如果我输入ascii字符，请说：mystring - 长度将计算为8.但是当输入UTF8字符时，字符可以是2/3/4字节。

让我们说输入的字符：i♥u，字节长度为5。

文本框最多可以接受31个字符。但是如果输入了UTF8字符，它将不接受字符串：i♥u♥u♥u♥u♥u。长度是30。

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

Answer 1

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

new Blob([str]).size

Even supported in IE10如果有人再使用它了。

Answer 2

计算UTF8字节在JavaScript中出现了很多，有点环顾四周，你会找到一些可以提供帮助的库（这里有一个例子：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个字节，此函数会对其进行正确计数。

Answer 3

实验TextEncoder API可用于此但Internet Explorer或Safari不支持：

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

另一种方法是对字符串进行URI编码并计算字符和％编码的转义序列，如this library中所示：

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

github页面有一个兼容性列表，遗憾的是它不包括IE10，而是IE9。

由于我还不能发表评论，我还要注意，接受答案中的解决方案不适用于由多个UTF-16代码单元组成的代码点。