La previsualización cortaba a 140 caracteres y de la bandera quedó media letra

El encargo era de los que no se apuntan en ningún tablero: en el panel de moderación, cada comentario se ve en una tarjeta con los primeros 140 caracteres y unos puntos suspensivos. Media hora, text.slice(0, 140), a otra cosa.

A la semana llega una captura desde soporte. Un comentario que terminaba con una bandera aparecía cortado justo por el medio, y en la tarjeta se veía una letra suelta metida en un cuadradito que nadie había escrito. Dos filas más abajo, otro comentario acababa en un rombo negro con una interrogación dentro.

Un carácter no es un carácter

La bandera de España son dos indicadores regionales, y cada uno ocupa dos unidades de código en JavaScript. slice cuenta unidades de código, así que puede partir por varios sitios y solo uno es inofensivo:

• Entre los dos indicadores: queda media bandera y el navegador la dibuja como una letra encuadrada.
• Dentro de un par subrogado: aparece el rombo de reemplazo.
• En un emoji compuesto (la mujer con el portátil, una familia): te quedas con el primer trozo y, a veces, con un pegamento invisible al final que se traga lo siguiente al concatenar los puntos suspensivos.

Y hay más: los modificadores de tono de piel se quedan huérfanos, y el texto pegado desde ciertos editores llega con los acentos descompuestos, con la tilde viviendo aparte de la vocal.

Lo difícil no era el algoritmo

La solución cabe en diez líneas: Intl.Segmenter con granularidad de grafema, recorrer segmentos hasta agotar el presupuesto y decidir tres cosas que el ticket no menciona — si los puntos suspensivos van dentro de los 140 o fuera, si se retrocede hasta el final de la palabra anterior, y si el contador que ve el moderador cuenta grafemas o caracteres.

Lo difícil era el banco de pruebas. Los casos que se te ocurren a mano son limpios y aburridos. Los que rompen el truncador estaban en el volcado de comentarios reales: gente que mete emojis a mitad de frase, gente que encadena tres banderas seguidas, gente que pega desde el móvil.

El truncador no se rompe con texto raro. Se rompe con texto normal escrito por personas normales.

Así que le pasé al modelo trescientos comentarios de verdad y le pedí que localizara los que contenían grafemas de más de una unidad de código, los agrupara por tipo y montara la tabla de tests con el resultado esperado de cada uno. En dos vueltas había diecinueve casos, y cuatro no se me habrían ocurrido nunca.

Ahí está el detalle que lo hace posible: esos trescientos comentarios son texto escrito por usuarios, con sus nombres, sus quejas y algún teléfono suelto. Eso no se pega en la caja de chat de un servicio ajeno, ni aunque prometa no guardarlo. Con el modelo corriendo dentro del navegador, el volcado, el prompt y el componente se quedaron exactamente donde estaban.