多行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 ，它将按照您的需要将文本格式设置为多行。

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

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

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

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

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

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