How to replace character with image using jQuery?

Iterate over the required elements and use a regex to change the '*' to the <img> elements. You will need a /g flag on the regex to change all of them in the string.

$('...').each(function() {
    var $this = $(this),
        html = $this.html();

    html = html.replace(/\*/g, '<img href="...">');
    $this.html(html);
});

Your selector is not in sync with your markup:

$('.nav ul li a span') -> there is no span in your lis

Fixing that selector, here's the code that would do the trick:

$('.nav ul li a').each(function() {
    var txt = $(this).text();
    var img = '<img src="img/star.png" alt="' + txt + '" />'
    var html = txt.replace(/\*/g, img);  // replace every star with an image tag
    $(this).html(html);
});

Here's demo: http://jsfiddle.net/mrchief/kycae/

You can do this very cleanly by just passing a function to the html()^[docs] method.

$('.nav ul li a').html(function(i,html) {
    return html.replace(/\*/g, '<img src="http://dummyimage.com/30x30/f00/fff.png&text=*" alt="' + html + '" />');
});

Example: http://jsfiddle.net/vrqgv/

Once you have your string:

some text ***** 

you can use split() and join() to replace the stars with the images:

var original = 'some text *****' ;
var withImages = original.split('*').join('<img src="img/star.png" alt="star" />');

Split creates an array with each element separated by the string passed in, and join returns an array to a string, inserting the passed string between each element.