How to wrap a html tag around a text selected in an input?

the problem is: I have an input text type element , and a button beside it. by clicking on the button, the selected text inside the input, must wrap with a html element. for example, by clicking on the button , the selected text wrapped with !

Does anyone has any solution ?!

Thanks to all