Как вставить теги <span>в середину текстовых строк, которые были сгенерированы из XML-канала?

Question

Я создаю тему WordPress для клиента, который хочет перенести свои любимые песни из Hype Machine на сайт. Я делаю это, захватывая фид XML.

Хотя с точки зрения стилизации результатов я бы хотел иметь возможность стилизовать имя исполнителя иначе, чем название песни. К сожалению, канал включает в себя как Имя исполнителя, так и Название песни в одних и тех же элементах привязки:

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

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

Мне было интересно, есть ли способ вставить теги span (с использованием javascript или Jquery) в сгенерированный html, чтобы результаты были такими:

<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 не смог помочь.

Мысли

Спасибо!

Answer 1

Если вы хотите просто сделать это самым простым способом -

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

artistAndTitle = "" + artistAndTitle;

artistAndTitle = artistAndTitle.replace ("-", "- ");

Answer 3

Я публикую эту ссылку постоянно: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Если исходный код не выполняет то, что вам нужно, посмотрите, что делает его код, и, возможно, вы сможете его адаптировать. По моему опыту, это довольно быстро, даже если применить изменения к довольно большому объему HTML-текста.