jQuery get content of all the span's before and after the selected
<p>I wrote this code : 
HTML</p>

<pre><code>&lt;p&gt;
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all
    the time.  He went on to be the
    happiest man in the world.  The end.
&lt;/p&gt;
</code></pre>

<p>JS:</p>

<pre><code>var words = $("p:first").text().split(" ");
var text = words.join("&lt;/span&gt; &lt;span&gt;");
$("p:first").html("&lt;span&gt;" + text + "&lt;/span&gt;");
$("span").click(function() {
    $(this).html('&lt;input value="'+$(this).text() +'"/&gt;');
    $(this).unbind("click");
});
</code></pre>

<p>Now i want when the user clicks on the word a input box opens up and i want when the users <code>blurs</code> from the input box it should change the word in the <code>p</code> accordingly.</p>

<p><strong>QUESTION</strong></p>

<p>How can i get all the text before and after the text of where the input box is shown ?
And then reset the value of <code>p</code> ?</p>
