สองสามวันก่อนทำหน้าเก็บสถิติ Wordle ตัวเอง โดยเก็บจากตอนเล่น Wordle เสร็จแล้วกด share จากนั้นก็เอามาใส่ code ไว้จากนั้นค่อยเอามา render ใน page ด้วย Next.js เอา ก็คิดว่าไม่น่าจะมีปัญหาอะไรอย่างวันนี้เล่นเสร็จกด share ก็ได้ออกมาประมาณนี้
Wordle 234 3/6
⬜🟩🟩⬜🟩
⬜🟩🟩⬜🟩
🟩🟩🟩🟩🟩
ก็ตัดแบ่งเอาบรรทัดบนสุดไปใส่ title จากนั้นส่วนที่เป็น emoji ก็แบ่งบรรทัดกับแบ่ง block render ใส่ html code เอา ซึ่งตอนแบ่งบรรทัดก็ไม่มีปัญหาอะไรหรอก มามีปัญหาตอนจะตัดแบ่ง block ในบรรทัดเดียวกันนี่แหละเพราะว่า ถ้าจะเอา ⬜🟨🟨⬜🟩 มาแบ่งด้วย .split() ใน javascript ผลที่ได้ก็จะออกมาเป็น ["⬜", "\ud83d", "\udfe8", "\ud83d", "\udfe8", "⬜", "\ud83d", "\udfe9"] เกินกว่าจำนวนอักขระที่เห็นตอน render
และพอจะ .charAt ก็เจอปัญหาเดียวกัน ลองเปิดอ่านใน MDN ก็บอกว่า split มีปัญหานี้
วิธีง่ายที่สุดถ้า emoji ไม่ซับซ้อนมากคือ spread string ออกมาเป็น array ก่อน [...text] จากนั้นก็ใช้ตำแหน่งใน array หรือเอา array range ไปใช้แทน string.length เอา ซึ่งมันก็ใช้ได้ในระดับนึง เช่น emoji block ใน wordle หรือตัวอักษรจีนส่วนใหญ่
แต่ถ้าเจอสุดยอด emoji อย่าง 👨👨👧👧 spread ก็พังเหมือนกันเพราะมันจะได้ออกมาเป็น ['👨', '', '👨', '', '👧', '', '👧'] แทน
คำแนะนำใน Stackoverflow ด้านบนที่ safe ที่สุดตอนนี้คือไปใช้ grapheme-split ซะ ซึ่งก็ดูเหมือนไม่มีทางเลือกอื่นตอนนี้