Converting sanitised html back to displayable html

Question

I'm getting html data from a database which has been sanitised.

Basically what I'm getting is something like this:

<div class="someclass"><blockquote>
  <p>something here.</p>
</blockquote>

And so on. So if I try to display it, it is displaying as

<div class="someclass"><blockquote> <p>something here</p> </blockquote>

What I want is to convert it to proper html before displaying, so that the content displays properly, without the tags.

What's the easiest way to do this using javascript?

Just want to note here that I'm working with in Adobe AIR. So I don't have any alternatives.

Answer 1

I'm not sure why you would want to do this with JavaScript, unless it's server-side JS... but in any case, you could just replalce > and < with their equivalents using the string's replace function.

However, this may lead to problems if you have used those two in some text, say you wrote an HTML tutorial or whatever. This is why in cases like this you may want to instead store the unsanitized HTML in your database, because converting it may be tricky to do correctly.

Answer 2

This could help in a snap:

String.prototype.deentitize = function() {
    var ret = this.replace(/>/g, '>');
    ret = ret.replace(/&lt;/g, '<');
    ret = ret.replace(/&quot;/g, '"');
    ret = ret.replace(/&apos;/g, "'");
    ret = ret.replace(/&amp;/g, '&');
    return ret;
};

Answer 3

You could create an element, assign the encoded HTML to its innerHTML and retrieve the nodeValue from the text node created on the insertion.

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes[0].nodeValue;
}

htmlDecode('<div class="someclass"><blockquote> <p>" ' +
           'something" here.</p>Q</blockquote>')

// returns :
// "<div class="someclass"><blockquote> <p>"something" here.</p>Q</blockquote>"

Note that this method should work with all the HTML Character Entities.