iframe that retains caret position when content is changed

Hi, I need someone to create a project that I haven't been able to do myself. I need someone to develop an iframe where the user can type into(content editable). When the user is typing, if a certain word is found(such as "Test"), the content is taken out of the iframe using JavaScript, the test word is replaced with tags <font color="red">Test</font> and is placed back into the iframe. The only problem here is that when the content is replaced the caret position is reset to the beginning. Is anyone able to solve this? So when the user is typing, and the content is replaced, the caret position should remain in the same place and not move, allowing the user to continue typing. Thank you!