Display link as a link in contenteditable div

Question

I am using js/jquery to do a find and replace in a contenteditable div. I want to replace #hath with <a href="#" id="pid:00000" contenteditable="false">Hathaway</a>

http://jsfiddle.net/atlchris/VSJ6E/

The find and replace all works good, but how can I make the link I am inserting be active (clickable) instead of being a actual tag?

Answer 1

replace

$('#field').text(newText);

to:

$('#field').html(newText);

http://jsfiddle.net/ichr/u75hN/1/