Decode HTML with Javascript

Question

I am trying to pull data from a data attribute of a link and decode the HTML in it, but it is not working.

Here is a JSFiddle of my code: http://jsfiddle.net/Kd25m/1/

HTML:

<a id="main" class="margin-right-5 no-underline" href="#" data-qid="0" data-name="Post\u0026#39;\u0026#39; \u0026#39;!@#$%^\u0026amp;*()_+{}|:\u0026quot;\u0026lt;\u0026gt;?,./;\u0026#39;[]\\212\u0026quot;\u0026quot;3\u0026quot;4567890-=\u0026#39;" data-caption="" data-description="Animals are generally considered to have evolved from a flagellated eukaryote.[39] \u0026#39;!@#$%^\u0026amp;*()_+{}|:\u0026quot;\u0026lt;\u0026gt;?,./;\u0026#39;[]\\21234567890-=\u0026#39;Their closest known living relatives are the ch...">
Alert Decoded HTML</a>

JS:

$('#main').click(function(e){
    e.preventDefault()
    //alert("AA");
    var name = $('#main').data('name');
    alert(name);
    var decoded = $("<div/>").html(name).text();
    alert(decoded);
});

Using this works if a string is put in the name var, but if I pull the value from the data attribute, it doesn't work anymore.

Where in that code do you expect the decoding to happen? Did you try a Google search for "javascript decode entities" or something similar? — Andrew McGivery, Jan 14 '14 at 19:25
@AndrewMcGivery var decoded = $("
").html(name).text(); this line is supposed to decode the HTML, but when pulling from the data attr, it doesn't decode it. If I was to do something like var decoded = $("
").html("\u0026#39;!@#$%^\u0026amp;*()_+{}|:\u0026quot;\u0026lt;\u0026gt;?,./;\u0026#39;[]\\212\u0026quot;\u0026quot;").text(); it would work, but the way it is, isnt working currently. — user3072169, Jan 14 '14 at 19:28
@DrCord the first alert should display the text while still encoded, the second alert should be displaying the decoded html. — user3072169, Jan 14 '14 at 19:30
Placing `\u0026` in a javascript string is not the same as it coming from the data attribute. The data attribute is actually equal to the string `\\u0026`. With only 1 slash in the javascript string, js will already decode that into the relevant character. This can easily be seen by the different result you get from the very first alert when replacing with a string. — James Montagne, Jan 14 '14 at 19:36
@kei The decoded text should be: Post'' '!@#$%^&*()_+{}|:"<>?,./;'[]\212""3"4567890-=' — user3072169, Jan 14 '14 at 19:44

ElChiniNet · Accepted Answer · 2014-01-14T20:03:16.800

3

Try to unescape the unicode characters first:

function convert(str){

    return str.replace(/\\u([a-f0-9]{4})/gi, function (found, code) {
      return String.fromCharCode(parseInt(code, 16));
    });

}

Next try to make the div and html trick:

var decoded = $("<div/>").html(convert(name)).text();

edited Jan 14 '14 at 20:03

answered Jan 14 '14 at 19:43

ElChiniNet

2,778
2
19
27

tried it, but still doesn't decode the text after converting it. – user3072169 Jan 14 '14 at 19:47
@user3072169 looks like it's working: http://jsfiddle.net/Kd25m/11/ – Pavlo Jan 14 '14 at 19:48
@elchininet correct, but to be precise you are unescaping Unicode inside JavaScript string, not "converting unicode to html". – Pavlo Jan 14 '14 at 19:50
Yep its working, my mistake. Thanks! Any explanation why this fixed it and wasn't working before? – user3072169 Jan 14 '14 at 19:53
That's right @Pavlo. thanks, i'll edit the response. Forgive my poor english – ElChiniNet Jan 14 '14 at 19:59
@user3072169 i'll try to explain you (forgive my poor english). When you write in javascript an string in unicode form it will unescaped, but if you read that string from the data attribute it will plain text and no unescaped, you need to convert the hex unicode part to decimal html entities and next unescape it. I don't know if I explained well. – ElChiniNet Jan 14 '14 at 20:09

score 0 · Answer 2 · answered Jan 14 '14 at 19:52

$('#main').click(function (e) {
    e.preventDefault()
    //alert("AA");
    var name = $('#main').data('name');
    var x = $("<p>").html(name).text();
    x = $("<p>").html(unescape(x.replace(/\u([\d\w]{4})/gi, function (match, grp) {
        return String.fromCharCode(parseInt(grp, 16));
    }))).text().replace(/\\/g, "");
    alert(x);
});

DEMO

Decode HTML with Javascript

2 Answers2