如何使用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个字节，此函数可以正确地对其进行计数。