Question

我一直在使用YouTube A.P.I开发网站。

在JSON文件的description标记内有换行符\n

我需要将这些标签转换为HTML格式

VideoDescriptions.push(item.snippet.description);

["Example description\nPlease click the link", "Another example description\nMore info"]

修改

此问题与链接文章不重复，因为：

使用YouTube API检索数据
从数组而不是字符串进行编辑是必要的（如在文章中描述）
任何一个问题的答案都可能导致不同的结果可能不适用

Answer 1

您可以在javascript中使用字符串replace：

＆＃13;

var items = ["Example description\nPlease click the link\n\n", "Another example description\nMore info"];
console.clear();


var changed = items.map(i => i.replace(/\n/g, '<br />'));
var div = document.querySelector("#test");
div.innerHTML = changed;

＆＃13;

<div id="test"></div>

＆＃13;

Answer 2

您应该从每一行创建单独的节点，而不是使用<br>，因为它允许更多的灵活性。你可以这样做：

＆＃13;

var description = ["Example description\nPlease click the link", "Another example description\nMore info"];
var fragment = description.reduce(function (frag, line) {
    var parts = line.split('\n');
    var container = document.createElement('div');
    var firstLine = document.createElement('p');
    var secondLine = document.createElement('a');
    firstLine.textContent = parts[0];
    secondLine.textContent = parts[1];
    secondLine.href = '#';
    container.appendChild(firstLine);
    container.appendChild(secondLine);
    frag.appendChild(container);
    return frag;
}, document.createDocumentFragment());
document.querySelector('.parent').appendChild(fragment);

＆＃13;

<div class="parent"></div>

＆＃13;

在这里，我们将描述并将其缩减为documentFragment，其中包含一个容器元素，在描述数组中每个项目包含两个子元素。

使用像textContent这样的方法可以防止XSS攻击向量（即使描述在您的控制范围内，也不会为了好玩而创建可能的XSS漏洞）。

Answer 3

有趣的是，如果您通过.innerText设置标记的内容，而不是innerHTML。所有\ n个字符都将转换为＆lt; br＆gt;为你标记。

例如：

document.getElementsByTagName（'h1'）[0] .innerText ='带有\ nLine中断的新文本。'

Answer 4

您可以使用javascript替换功能，并根据您的需要替换项目：

 String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
    };

var test = ["yes, this is my example\n", "goodbye"];
console.log(test[0].replaceAll('\n', '<br>'))

将JSON \ n转换为HTML <br/>标签

4 个答案: