Convert JSON \n to HTML
tag

Question

I've been developing a website using the YouTube A.P.I.

Within the description tag in the JSON file are line breaks \n

I need to convert these tags to HTML format

VideoDescriptions.push(item.snippet.description);

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

Edit:

This question is NOT a duplicate of the linked article because:

It's using the YouTube API to retrieve data
It's necessary to edit from an array rather than the string (as described in the article)
The answers in either question could lead to different results and may not apply

Possible duplicate of [JavaScript replace \n with
](http://stackoverflow.com/questions/5076466/javascript-replace-n-with-br) — Gerardo Furtado, Sep 08 '16 at 06:16

Morteza Tourani · Accepted Answer · 2020-10-01T21:18:04.047

3

You can simply use string replace in javascript:

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;

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

edited Oct 01 '20 at 21:18

answered Sep 08 '16 at 06:17

Morteza Tourani

3,506
5
41
48

1

Guess I was just using the replace tag wrong, thanks for the answer! – Andres Sweeney-Rios Sep 08 '16 at 06:32

vothaison · Answer 2 · 2016-09-08T07:36:01.100

2

Fun fact, if you set the content of your tag by .innerText, rather than innerHTML. All the \n characters will be converted into < br > tag for you.

Ex:

document.getElementsByTagName('h1')[0].innerText = 'New text with a \nLine break.'

edited Sep 08 '16 at 07:36

answered Sep 08 '16 at 06:47

vothaison

1,646
15
15

Wouldn't I have to apply this to each string in the array? – Andres Sweeney-Rios Sep 08 '16 at 07:09
I mean you can keep all the strings intact, and use innerText when you want to output them on the page. – vothaison Sep 08 '16 at 07:37
I get it. Are there any other advantages to using `.innerText` ? – Andres Sweeney-Rios Sep 08 '16 at 07:44
It does what it does. And it is just handy in your case. – vothaison Sep 08 '16 at 08:47

Olli K · Answer 3 · 2016-09-08T06:37:35.940

You should probably create individual nodes from each line instead of using <br> as it allows more flexibility. You could do something like this:

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

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

Here we take the description and reduce it into a documentFragment containing a container element with two children per item in the description array.

Using methods like textContent will prevent the XSS-attack vector (even if the descriptions are in your control, don't create possible XSS vulnerabilities for fun).

score -1 · Answer 4 · answered Sep 08 '16 at 06:15

You can use a javascript replace function, and replace items by your needs:

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

Convert JSON \n to HTML tag

4 Answers4

Convert JSON \n to HTML
tag