鼠标悬停时标记的文本框中的单词

Question

所以主要思想是：用户通过文本框输入，文本移到div。现在，当用户将鼠标移动到某些输入的单词上时，会标记单词并在整个文本后显示该单词。现在我有一个简单的文本框和div文本：

<input id="textBoxToTranslate" type="text" style="height: 100px; width: 500px" value="">    </input>

<script type="text/javascript">
    $('#textBoxToTranslate').keyup(function(){
        $('#content').text($('#textBoxToTranslate').val());
    });
</script> 

此外，我还有用于标记单词的脚本，但此文本已准备好，而不是来自文本框。

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>


<script>
$('p').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});



$('p span').hover(
    function() {
        $('#word').text($(this).css('background-color','#ffff66').text());
    },
    function() {
        $('#word').text(''); $(this).css('background-color','');
    }
);    

谁可以帮助我，如何连接这些脚本？我需要标记可以在文本上工作，文本在文本框中输入。