I have this code:

```
<p>Hi. I am your friend. you are my friend.<br> we <a href="both.html">both</a> are friends.</p>

```

My aim is to enclose the text before the anchor tag as well as after the anchor tag into separate spans. Thus, i want something like this in the DOM:

```
<p><span>Hi. I am your friend. you are my friend.<br> we </span><a href="both.html">both</a><span> are friends.</span></p>

```

Can anybody please help me and tell me how to do it in jQuery?