将 JSON \n 转换为 HTML 标签答案

【问题标题】：Convert JSON \n to HTML tag将 JSON \n 转换为 HTML 标签
【发布时间】：2017-01-15 22:58:09
【问题描述】：

我一直在使用 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 来检索数据
必须从数组而不是字符串进行编辑（如文章中描述）
任何一个问题的答案都可能导致不同的结果和可能不适用

【问题讨论】：

JavaScript replace \n with 的可能重复

标签： javascript html json line-breaks youtube-data-api

【解决方案1】：

你可以简单地在javascript中使用字符串replace：

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 />')).join('');
var div = document.querySelector("#test");
div.innerHTML = changed;

&lt;div id="test"&gt;&lt;/div&gt;

【讨论】：

猜猜我只是使用替换标签错误，谢谢你的回答！

【解决方案2】：

有趣的是，如果您通过 .innerText 而不是 innerHTML 设置标签的内容。所有的\n字符都会为你转换成
标签。

例如：

document.getElementsByTagName('h1')[0].innerText = '带有\n换行符的新文本。'

【讨论】：

我不需要将它应用于数组中的每个字符串吗？
我的意思是你可以保持所有字符串不变，当你想在页面上输出它们时使用innerText。
我明白了。使用.innerText 还有其他优势吗？
它做它该做的事。在你的情况下它很方便。

【解决方案3】：

您可能应该从每一行创建单独的节点，而不是使用 ，因为它提供了更大的灵活性。你可以这样做：

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);

&lt;div class="parent"&gt;&lt;/div&gt;

这里我们获取描述并将其简化为documentFragment，其中包含一个容器元素，描述数组中的每个项目都有两个子元素。

使用textContent 之类的方法将阻止 XSS 攻击向量（即使描述在您的控制范围内，也不要为了好玩而创建可能的 XSS 漏洞）。

【讨论】：

【解决方案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>'))

【讨论】：