Need of the following feature

1. select the text/string using the mouse (just like we usually use on mouseDown and mouseUp )
2. Replace the selected string with the input tag
3. replace the original string with the text which we filled in the input tag.

Below images shows whole idea.

step 1: select the text (select only one not same as shown in image

step 2: replace selected text with input tag

step 3 : enter text in input tag

step 4: on button click we add that string to original string and input element will remove now

I tried replacing selected text with different text but was unable to replace it dynamically !!

posts i read before post this question

• How to find index of selected text in getSelection() using javascript?
• How to get the start and end points of selection in text area?
• replace selected text in contenteditable div
• Replacing selected text - HTML / JavaScript
• Select Text & highlight selection or get selection value (React)