多行JSON字符串到多行Javascript字符串

Question

我确定这是一件简单的事情，但我仍然遇到一些麻烦，所以我向音乐API发出了HTTP请求，我想获取搜索到的歌曲的歌词，所以我做到了，它的工作原理很好，问题在于控制台中的JSON字符串是正确的，就像普通歌词一样。

但是，当我采用完全有序的字符串并将其放入Javascript变量并在屏幕上打印时，歌词会像这样单行显示：

这是第1节。这是第2节。这是第3节。这是第4节。这是第5节，依此类推。

这是我的代码。

axios.get(urlLyric, { 'headers': headers })
    .then(function (response) {
        let lyrics = response.data.lyrics_body;
        console.log(lyrics);
        $(".lyrics").html(`<p>${lyrics}</p>`)
    })
    .catch(function (err) {
        console.log(err);
    });

Answer 1

如果lyrics是一个数组，那么您可以这样做

编辑： 如果lyrics只是换行的文本，请添加替代项

编辑＃2： 从lyrics正文

转义HTML实体

    axios.get(urlLyric, { 'headers': headers })
    .then(function (response) {
        let lyrics = response.data.lyrics_body;
        console.log(lyrics);
        // loop lyrics (if lyrics is an array)
        /*
        for(var x=0; x<lyrics.length; x++) {
            $(".lyrics").append('<p>'+lyrics[x]+'</p>');
        }
        */
        // if lyrics is just text with new line, escape HTML entities & replace newline character with br.
        $(".lyrics").html('<p>'+lyrics.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/gi,'<br>')+'</p>');
    })
    .catch(function (err) {
        console.log(err);
    });

Answer 2

该问题与JSON完全无关，也与您从API获取数据无关。问题是您正在尝试在HTML上下文中使用纯文本。

如果我具有以下HTML：

<p>
  Line 1
  Line 2
</p>

您会在页面上看到以下文字：

Line 1 Line 2

有几种方法可以解决此问题。其中之一是更改CSS处理空白的方式。

white-space: pre-line

如果您使用pre-line，它将按照您的需要将文本格式化为多行。

解决此问题的另一种方法是将文本转换为实际的结构化标记。一行歌词是段落吗？我不这么认为，但这无疑是有争议的。

无论采用哪种方法，都不要简单地将文本连接到HTML上下文中。必须先将其转义。以您的代码为例：

        $(".lyrics").html(`<p>${lyrics}</p>`)

如果歌曲歌词中包含类似<script src="something-evil.js"></script>的内容怎么办？您显然不希望外部API能够劫持整个站点。您必须转义该文本。

在jQuery中最简单的方法是调用.text()。像这样：

$('.lyrics').append(
  $('<p>').text(lyrics)
);