jQuery中.length获取含Emoji字符串长度结果错误的求助

Hey there! I totally get why this is frustrating—those emojis love throwing a wrench into UTF-16-based length calculations. Let’s break down the problem and walk through simple fixes that’ll give you the accurate character count you need.

Why You’re Getting 10 Instead of 8 #

JavaScript’s native String.length property counts UTF-16 code units, not actual visual characters. Emojis like 😂 and 😱 are made up of two UTF-16 "surrogate pairs" (each pair equals one visual emoji), so each emoji gets counted as 2 units instead of 1.

For your example string 😂 text 😱:

• 😂 = 2 code units
• text = 6 code units (space + t + e + x + t + space)
• 😱 = 2 code units
  Total: 2+6+2 = 10, which is why you’re seeing that number. But you want to count each visual character (emoji included) as 1, so the expected 8 makes perfect sense.

Solutions to Get the Correct Count #

1. Use ES6 Spread Operator (Simplest Modern Approach) #

The spread operator (...) automatically splits strings into actual Unicode characters (grapheme clusters), ignoring UTF-16 surrogate pair boundaries. Here’s how to use it with jQuery:

const elementText = $(element).text();
const accurateCount = [...elementText].length;
console.log(accurateCount); // Outputs 8 for your example

This works in all modern browsers and is super readable—perfect for most cases.

2. Use Intl.Segmenter (Most Robust for Complex Emojis) #

If you need to handle more complex emojis (like family emojis 👨‍👩‍👧 or ones with skin tone modifiers), the Intl.Segmenter API is designed to split text into semantic grapheme clusters. It’s a bit more verbose but rock-solid:

const elementText = $(element).text();
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
const segments = Array.from(segmenter.segment(elementText));
const accurateCount = segments.length;
console.log(accurateCount); // Outputs 8 for your example

This is the best choice if you’re dealing with diverse emoji sets or need strict Unicode compliance.

3. Regex Fallback (For Older Browsers) #

If you need to support older browsers that don’t have ES6 or Intl.Segmenter, use a Unicode-aware regex to match each character:

const elementText = $(element).text();
const matches = elementText.match(/./gu);
const accurateCount = matches ? matches.length : 0;
console.log(accurateCount); // Outputs 8 for your example

The u flag enables Unicode mode, so the regex matches each visual character instead of UTF-16 units. We add a check for matches to avoid errors if the string is empty.

Final Recommendation #

Stick with the spread operator for most projects—it’s clean, efficient, and works everywhere you’d likely be using jQuery these days. If you’re dealing with edge-case emojis, go for Intl.Segmenter.

内容的提问来源于stack exchange，提问作者Dan