Question

I’m using a bit of JSON to parse information from facebook pages to display on my site, which is working almost perfectly! All the information is being pulled in however I am losing the line breaks in the html (which I would like to keep).

I can see through the graph api that the new lines are displayed as \n, so the simplest way I can think of doing this is using jQuery to find any \n and replace it with <br /> I have had a look around but a simple find and replace method such as:

$(span#about_" + index).html(this.html().replace('\n','<br />'));

However this doesn’t work because the \n tags are not passed through to the html.

So I am wondering if anyone knows how I can achieve this? Any help would be greatly appreciated!

My original JSON request is below:

$.each(json, function(index, item) {
                $(".facebook span#likes_" + index).html("<a href='" + item.link + "' alt='" + item.name + " on Facebook'><ul><li>" + item.likes + "</li></ul><h4>Facebook Fans</h4></a>");
                $("span#about_" + index).html("<p>" + item.description + "</p>");
});

Many thanks in advance, MB

Answer 1

Can you do item.description.replace(/\n/g, '<br />')?

It seems the replace method will only replace the first occurrence. If you use a regular expression you can tell it to replace globally.

$.each(json, function(index, item) {
    $(".facebook span#likes_" + index).html("<a href='" + item.link +
        "' alt='" + item.name + " on Facebook'><ul><li>" + item.likes +
        "</li></ul><h4>Facebook Fans</h4></a>");
    $("span#about_" + index).html("<p>" +
        item.description.replace(/\n/g, '<br />') + "</p>");
});