prácticaavanzado
Editor de texto enriquecido
Construye un editor donde las palabras que empiezan con '@' se colorean de azul, las que empiezan con '#' de verde, los emails de naranja y las URLs de púrpura. Además, muestra un contador que se incrementa cada vez que se detecta un email o URL nuevo (no repetido).
Objetivos
- 1.Parsea el texto en
tokensusando regex: @mención, #hashtag, email, url y texto normal - 2.Renderiza cada token con su color correspondiente dentro de un div con
contentEditablesimulado o un div superpuesto - 3.Mantén en un Set los emails y URLs únicos ya detectados
- 4.Muestra un contador que solo incrementa al detectar un email/URL nunca visto antes
- 5.El input debe ser un
textareafuncional; el resaltado se superpone visualmente - 6.El div de resaltado debe sincronizarse con el scroll del textarea
tu código
Pista
El truco es superponer un div sobre el textarea con pointer-events:none. El textarea es transparente (color: transparent) y el div de abajo renderiza el HTML coloreado. Ambos comparten el mismo font, tamaño y padding para que los textos se alineen perfectamente.
Conceptos relacionados
¿Fue útil?
Inicia sesión para dar feedback