Decode HTML with Javascript [duplicate]

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
– Andrew McGivery, Commented Jan 14, 2014 at 19:25
@AndrewMcGivery var decoded = $("<div/>").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 = $("<div/>").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
– user3072169, Commented Jan 14, 2014 at 19:28
@DrCord the first alert should display the text while still encoded, the second alert should be displaying the decoded html. — user3072169
– user3072169, Commented Jan 14, 2014 at 19:30

ElChiniNet · Accepted Answer · 2014-01-14 20:03:16Z

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, 2014 at 20:03

answered Jan 14, 2014 at 19:43

ElChiniNet

2,9183 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3072169 Over a year ago

tried it, but still doesn't decode the text after converting it.

Pavlo Over a year ago

@user3072169 looks like it's working: jsfiddle.net/Kd25m/11

Pavlo Over a year ago

@elchininet correct, but to be precise you are unescaping Unicode inside JavaScript string, not "converting unicode to html".

user3072169 Over a year ago

Yep its working, my mistake. Thanks! Any explanation why this fixed it and wasn't working before?

ElChiniNet Over a year ago

That's right @Pavlo. thanks, i'll edit the response. Forgive my poor english

|

kei · Accepted Answer · 2014-01-14 19:52:07Z

0

$('#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

answered Jan 14, 2014 at 19:52

kei

20.5k2 gold badges38 silver badges64 bronze badges

Collectives™ on Stack Overflow

Decode HTML with Javascript [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related