Necesidad de la siguiente característica

1. seleccione el texto/cadena con el mouse (tal como lo usamos generalmente en mouseDown y mouseUp )
2. Reemplace la cadena seleccionada con la etiqueta de entrada
3. reemplace la cadena original con el texto que completamos en la etiqueta de entrada.

Las siguientes imágenes muestran la idea completa.

paso 1: seleccione el texto (seleccione solo uno que no sea el mismo que se muestra en la imagen

paso 2: reemplaza el texto seleccionado con la etiqueta de entrada

paso 3: ingrese el texto en la etiqueta de entrada

paso 4: al hacer clic en el botón, agregamos esa cadena a la cadena original y el elemento de entrada se eliminará ahora

¡Intenté reemplazar el texto seleccionado con un texto diferente pero no pude reemplazarlo dinámicamente!

publicaciones que leí antes de publicar esta pregunta

• ¿Cómo encontrar el índice del texto seleccionado en getSelection () usando javascript?
• ¿Cómo obtener los puntos de inicio y finalización de la selección en el área de texto?
• reemplazar el texto seleccionado en div contenteditable
• Reemplazo de texto seleccionado - HTML / JavaScript
• Seleccionar Texto y resaltar la selección u obtener el valor de la selección (Reaccionar)