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?