🔰grapheme cluster

JS ⟩ value ⟩ primitive ⟩ String ⟩ Unicode ⟩ grapheme cluster

the real characters/symbols, as displayed on screen or paper, may be composed of one or more code points.

'/u' flag doesn't do well with grapheme clusters❗

/<.>/u.test("<🏳️‍🌈>"),                  // false❗️
/<....>/u.test("<🏳️‍🌈>"),               // true ⭐️

replit ⟩ /u flag, require ⟩ String extension

// ⭐ import
const _String = require('./ext/String_ext.js');      // String extension

[
    '🍎'.codeUnits,     // [ 55356, 57166 ]     // surrogate pair (2 code units)
    '🍎'.codePoints,    // [ 127822 ]           // 1 code point

    '🏳️‍🌈'.codeUnits,     // [ 55356, 57331, 65039, 8205, 55356, 57096 ]
    '🏳️‍🌈'.codePoints,    // [ 127987, 65039, 8205, 127752 ]    // 4 code points❗️

    // --------------------------------------------
    // ❗️regex works on "code units", by default.
    // --------------------------------------------
    
    /🍎{3}/.test("🍎🍎🍎"),                      // false❗️
    // let 🍎 = ab (where a = 55356, b = 57166)
    // then /🍎{3}/ = /ab{3}/ = /abbb/❗️
    // which is not /🍎🍎🍎/ = /ababab/❗️

    /<.>/.test("<🍎>"),                           // false❗️
    // <🍎> = <ab>, which is not <.>

    // --------------------
    // ✅ enable /u flag
    // --------------------

    /<.>/u.test("<🍎>"),                          // true ⭐️

    // ❗️'/u' flag doesn't do well with grapheme clusters.
    /<.>/u.test("<🏳️‍🌈>"),                          // false❗️
    /<....>/u.test("<🏳️‍🌈>"),                       // true ⭐️

    // ⭐️ 搜尋「漢字」
    `Hello Привет 你好`.match(/\p{sc=Han}/gu),     // [ '你', '好' ]

    // ⭐️ Script
    /\p{Script=Greek}/u.test("α"),      // → true
    /\p{Script=Arabic}/u.test("α"),     // → false

    // ⭐️ Alphabetic
    /\p{Alphabetic}/u.test("α"),        // → true
    /\p{Alphabetic}/u.test("!"),        // → false
    /\p{Alphabetic}/u.test("漢"),       // → true

].forEach(x => console.log(x));

Previouscode point Nextcode plane

Last updated 2 years ago

Was this helpful?

// ⭐ import const _String = require('./ext/String_ext.js'); // String extension [ '🍎'.codeUnits, // [ 55356, 57166 ] // surrogate pair (2 code units) '🍎'.codePoints, // [ 127822 ] // 1 code point '🏳️‍🌈'.codeUnits, // [ 55356, 57331, 65039, 8205, 55356, 57096 ] '🏳️‍🌈'.codePoints, // [ 127987, 65039, 8205, 127752 ] // 4 code points❗️ // -------------------------------------------- // ❗️regex works on "code units", by default. // -------------------------------------------- /🍎{3}/.test("🍎🍎🍎"), // false❗️ // let 🍎 = ab (where a = 55356, b = 57166) // then /🍎{3}/ = /ab{3}/ = /abbb/❗️ // which is not /🍎🍎🍎/ = /ababab/❗️ /<.>/.test("<🍎>"), // false❗️ // <🍎> = <ab>, which is not <.> // -------------------- // ✅ enable /u flag // -------------------- /<.>/u.test("<🍎>"), // true ⭐️ // ❗️'/u' flag doesn't do well with grapheme clusters. /<.>/u.test("<🏳️‍🌈>"), // false❗️ /<....>/u.test("<🏳️‍🌈>"), // true ⭐️ // ⭐️ 搜尋「漢字」 `Hello Привет 你好`.match(/\p{sc=Han}/gu), // [ '你', '好' ] // ⭐️ Script /\p{Script=Greek}/u.test("α"), // → true /\p{Script=Arabic}/u.test("α"), // → false // ⭐️ Alphabetic /\p{Alphabetic}/u.test("α"), // → true /\p{Alphabetic}/u.test("!"), // → false /\p{Alphabetic}/u.test("漢"), // → true ].forEach(x => console.log(x));