Adding separators between letters

I have the following HTML to give ABC links for a long list of items divided into pages by letter of the alphabet. I cannot change the HTML.

<p>
    <a href="A.html">A</a>

    <!-- all the items on this page start with this letter 
         It is not contained in any special div, just floats among the links -->
    B

    <a href="c.html">C</a>        
    <a href="d.html">D</a>        
    <a href="e.html">E</a>        
    <a href="f.html">F</a>        
    <a href="g.html">G</a>

    <!-- and so on through z -->
</p>

I need to put a separator (the following HTML) between every letter:

<span class="separator">|</span>

However, if I put a separator before or after every link, the plain letter will not have a separator between itself and one of the links surrounding it.

How can I place a separator between every link, without changing the HTML, keeping in mind that any of the letters can be plain text without a containing <a> or any other tag except for the outer <p>?

Edited to show desired results (two of many possibilities). The letter in bold is not a link; all the other letters are:

A | B | C | D | E | F ...

Solution

var separator = "<span class='separator'>|</span>";

$("p").contents().each(function(){
    var $this = $(this);

    if($.trim($this.text()).length>0){
        if(this.nodeType == 3){
            // text node, possibly multiple characters that need separation
            var characters = this.nodeValue.replace(/\s/g, "").split("");
            var output = "";

            for(var i=0; i<characters.length; i++){
                output += " " + characters[i] + separator;
            }                    

            $(this).replaceWith(output + " ");                
        } else {
            $this.after(separator);
        }
    }
});

$(".separator:last").remove();

http://jsfiddle.net/kJ3yW/1/