How do I insert <span> tags into the middle of text strings that were generated from an XML feed?

Question

I'm building a wordpress theme for a client who wants to pull their favorite songs from Hype Machine into the site. I'm doing by grabbing the XML feed.

In terms of styling the results though, I'd like to be able to style the Artist Name differently than the Song Title. Unfortunately, the feed includes both the Artist Name and Song Title in the same anchor elements as such:

<li>
    <a href="link">Artist Name - Song Title</a>
</li>

<li>
    <a href="link">Artist Name - Song Title</a>
</li>

I was wondering if there's a way I can insert span tags (with javascript or Jquery maybe) into the generated html so that the results are like:

<li>
    <a href="link"><span class="artist">Artist Name - </span>Song Title</a>
</li>

<li>
    <a href="link"><span class="artist">Artist Name - </span>Song Title</a>
</li>

My thought was that I could use a javascript to insert the open tag in front of the string then when it finds "- " insert the closing tag. I just don't know JS well enough to know how to do it and google hasn't been able to help much.

Thoughts?

Thanks!

Answer 1

If you wanted to just do it the simplest possible way -

var artistAndTitle = // wherever you get your info from, xml node or whatever
var infoArray = artistAndTitle.split(' - ');
var artistName = infoArray[0];
var trackTitle = infoArray[1];
var html = '<span>' + artistName + '</span> - <span>' + trackTitle + '</span>';

Answer 2

I post this link all the time: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

If the source code doesn't do exactly what you want, look at what his code does and maybe you can adapt it. It's pretty fast, in my experience, even when applying changes to a fairly large amount of HTML text.

Answer 3

artistAndTitle = "< span >" + artistAndTitle;

artistAndTitle = artistAndTitle.replace(" - ", " - < / span >");