Tengo un texto largo (con varias líneas) dentro del área de texto. Ahora me gustaría encontrar algunas subcadenas en el texto y cubrirlas con el div absolutamente posicionado (como cubrir una expresión dentro del texto con alguna etiqueta). Por ejemplo:
Lorem ipsum dolor sit <TAG_1> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <TAG_2> commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oficia deserunt mollit <TAG_3> id est laborum.
Así que aquí necesito encontrar las posiciones de <TAG_1> , <TAG_2> y <TAG_3> (en píxeles), y en base a ellas crear 3 divs con una posición absoluta para cubrirlos.
También intenté implementarlo usando contenteditable="true"
div (para que estos divs de etiquetas y el resto del texto se muestren en línea), pero el problema es que rompe líneas después de la etiqueta.
¿Es posible o tal vez hay un mejor enfoque?