Как вывести текст из одной строки в формате «артист — песня» с помощью JS без багов?

Question

[Pavel Pavel]

Товарищи, приветствую!

Скажу сразу, что не являюсь гуру в JS, однако, прошу мне подсказать, как двигаться дальше. Сделал своими силами, что смог, но где-то накосячил...

Итак, есть php-скрипт, который извлекает информацию из xml-файла в одну строку. Получаем что-то вроде Calvin Harris, Dua Lipa - One Kiss или David Guetta, Sia - Flames

Далее с помощью JS эта информация подгружается в html-файл, который имеет структуру:

<div class="meta-info">
  <div class="label">Сейчас в эфире:</div>
    <div id="artist">&nbsp; </div>
    <div id="song">&nbsp; </div>
  </div>

Фрагмент JS выглядит следующим образом:

xmlhttp.onreadystatechange = function() {
	4 === xmlhttp.readyState && 200 === xmlhttp.status && (artist_info.innerText = xmlhttp.responseText.split("-")[0], song_info.innerText = xmlhttp.responseText.split("-")[1], console.log(xmlhttp.responseText.split("-")))
}, xmlhttp.open("GET", "/pn2.php"), xmlhttp.send(), setInterval(function() {
	xmlhttp.open("GET", "/pn2.php"), xmlhttp.send()
}

Заметил, что когда звучит песня, например, G-Easy, Halsey - Him & I, на странице происходит анархия вот в таком виде:

Соответственно, возникает вопрос, как необходимо подправить код, чтобы название песни G-Easy, Halsey - Him & I отображалось корректно? Понимаю, что код видит в названии - и решает разорвать название, но для пользователя получается неправильно...

Буду крайне признателен!

Answer 1

[nowm]

Можно вместо split("-") сделать split(" - "), но, вообще, лучше использовать JSON, чтобы название трека и артист были в отдельных полях. Это будет надёжнее работать, потому что входные данные могут быть непредсказуемыми. Например, название артиста будет содержать «–» с пробелами, и всё опять сломается.

Comments

[Pavel Pavel]

А если указывать split("\s-\s") — это не является правильным?

Получается, что просто сделать обычный пробел?

[nowm]

Pavel Pavel, split("\s-\s") не будет работать, потому что нужно писать это так: split(/\s-\s/). Опять же, JSON лучше, потому что могут быть ситуации, когда это встретится внутри той части, которая относится к авторам, а иногда — в той части, которая относится к названию. Например, автор: «Иван Иванов - проект Мой первый сингл», а название: «Хорошая погода - это круто». Но это ваше дело, я навязывать не буду — я просто обратил внимание, что с JSON удобнее работать.

[Pavel Pavel]

nowm, большое спасибо! Если бы я ещё умел работать с JSON...

[Пашенька]

Pavel Pavel, суть в том, что если у вас нигде не фигурирует точный исполнитель, то разделить эту строку на исполнителя и песню стопроцентно нельзя, всегда будет вероятность ошибки.

[nowm]

Pavel Pavel, в pn2.php вместо echo $artist . ' - ' . $song; достаточно сделать

echo json_encode(['artist' => $artist, 'song' => $song]);

, а в JS заменить 4 === xmlhttp.readyState /* . . . */ (всю эту строку — я просто сократил, чтобы коммент уменьшить) на это:

if (4 !== xmlhttp.readyState || 200 !== xmlhttp.status) {
    return;
}

var data = JSON.parse(xmlhttp.responseText);

artist_info.innerText = data['artist'];
song_info.innerText = data['song'];

console.log('Got data from pn2.php', data);

Насчёт контента в PHP я могу и ошибаться и код, который я показал — просто пример, но у вас там, скорее всего должны быть доступны какие-то переменные, в которых содержится, раздельно, имя исполнителя и название трека. Вместо объединения их в строку просто вызывается json_encode для массива — я думаю, идея понятна. Если нет, то покажите код на php и я попрубую пояснить, как его исправить, чтобы использовать JSON.

[nowm]

Но если у вас в том XML-файле, из которого берутся данные на стороне сервера, нет разделения на артиста/песню, то с JSON даже нет смысла заморачиваться, потому что это не поможет.

[Pavel Pavel]

nowm, большое спасибо за помощь! Код XML, который формирует название песни в единую строку выглядит вот так:

<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" >
<xsl:output method="xml" media-type="text/html" indent="yes" encoding="UTF-8"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />
<xsl:template match = "/icestats" >
<xsl:for-each select="source">
<xsl:if test="artist"><xsl:value-of select="artist" /> - </xsl:if><xsl:value-of select="title" />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

А php на текущий момент выглядит так (знаю, что не идеальное решение):

<?php
$song=file_get_contents('ссылка на аудиопоток');
$song=str_replace("&amp;","&", $song);
file_put_contents('./icemeta.txt', $song);

$output = shell_exec('sed -n 2p ./icemeta.txt ');
echo "$output";

?>

[Rsa97]

Pavel Pavel, Попробуйте сделать так:

{<xsl:for-each select="source">
  "<xsl:value-of select="@mount" />":{
    "artist":"<xsl:if test="artist"><xsl:value-of select="artist" /></xsl:if>",
    "title":"<xsl:value-of select="title" />"
  }<xsl:if test="position() != last()"><xsl:text>,</xsl:text></xsl:if>
</xsl:for-each>}

На выходе должен получиться список точек в JSON-формате.
https://habr.com/ru/post/145694/

[Pavel Pavel]

nowm, очень нужна ваша помощь в корректировки php-кода! :)

[nowm]

Pavel Pavel, я могу только подсказать что-нибудь, когда у меня есть свободное время. Я просто раньше помогал людям с кодом, но это всегда в итоге превращается в работу (чаще всего бесплатную), а у меня сейчас 2 рабочих + 2 личных проекта, которые нужно поддерживать и развивать, так что новую работу я не имею возможности взять из-за нехватки времени. Извиняюсь, но правда не получится.

Answer 2

[Rsa97]

Если на сервере можно получить нужные поля отдельно, то отправляйте с сервера нормальный объект в JSON и не извращайтесь с резкой строк.