Automatically generates color tags(<color="red">,</color>)

code

<form action='action.cfm' method='post'>

<select name='color'>
<option value='colors'>colors</option>
<option value='green'>green</option>
<option value='blue'>blue</option>
<option value='red'>red</option>
</select>

<textarea name='box'></textarea>


</form>let's suppose I have the above code.
If a user opens the file above in browser, it will show a color selection box, and a textarea box.
I like to make it like the following.

If a user writes the following sentence

"I like to write this sentence in red." into the textarea, and drags his or her mouse from "I like ~" to "~sentence." and select "red" in the selection box, then
<color="red"> and </color> are automatically generated and surround the sentence.

So it will look like the following.

<color="red">I like to write this sentence in red.</color>

Can I make it in javascript with your help? How?