javascript - Words from textbox marked when mouse over -

So the main idea: the user input through text box moved to text div is. Now, when the user transfers a mouse over an entered word, the word is marked and this word is displayed after the entire text. Now I have a simple text box with text and div :

Also I have a script to mark words, but this text is ready, not from the text box.

  & lt; P & gt; Each word will wrap up a span. & Lt; / P & gt; & Lt; P & gt; Here is the second paragraph. & Lt; / P & gt; Word: & lt; Span id = "word" & gt; & Lt; / Span & gt; & Lt; Script & gt; $ ('P') each (function () {var $ this = $ (this); $ this.html ($ this.text (). Replace (/ \ b (\ w +) \ b / g, & lt ; $ 1 & lt; / span & gt; "));}); $ ('P span'). Hover (function () {$ ('# word'). Text ($ (this) .css ('background-color', '# ffff66'). Text ());}, function () {$ ('# word'). Text (''); $ (this) .css ('background- Color ',' ');});  

Who can help me, how can these scripts be linked? I need to work on the marking text, which is the text box .