我如何插入 <span>标签插入从 XML 提要生成的文本字符串的中间?

问题描述:

我正在为希望将他们最喜欢的歌曲从 Hype Machine 拉入网站的客户构建一个 wordpress 主题.我正在通过抓取 XML 提要来做.

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>

我想知道是否有一种方法可以将 span 标签(可能使用 javascript 或 Jquery)插入到生成的 html 中,以便结果如下:

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>

我的想法是我可以使用javascript在字符串前面插入打开标签,然后当它找到-"时插入结束标签.我只是不太了解 JS,不知道该怎么做,而 google 也帮不上什么忙.

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.

想法?

谢谢!

如果您只想以最简单的方式去做 -

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>';