Thomas’ Developer Blog

May 1, 2008

Neat little HTML encoding trick in javascript

Filed under: AJAX, HTML, javascript — Tags: , , , , — sanzon @ 4:00 am

I came across a really neat trick in javascript lately that actually goes ahead and kind of cheats in a very effective manor!

Here’s the problem with javascript, everytime you send information from a form to a server side script, such as with AJAX, with HTML brackets it will return an error.  You can either manually fix this, or use a really neat trick called “escape”

 function escapeHTMLEncode(str) {
  var div = document.createElement(‘div’);
  var text = document.createTextNode(str);
  div.appendChild(text);
  return div.innerHTML;
 }

 What this simple little function does is take the internal HTML conversion code from your browser and returns a string converted to HTML.  It’s an awsome trick with how simple it is.

See, you have to note that whenever a browser creates an element in javascript, and a text node is created, the browser will go ahead and make sure that string comes out as raw code, and not as HTML, thus the term textnode and not innerHTML.

Now if they only had a way to reverse it that was that easy. lol

About these ads

15 Comments »

  1. Hi,

    Really very helpful post.

    Thanks
    [:)]

    Surjit

    Comment by Surjit Singh Dadhwal — May 1, 2008 @ 7:33 am

  2. [...] IE, Internet Explorer, regex, replace, Rubic’s Cube, Safari, Thomas, trick, unescape |   Over here, Thomas has this “neat little HTML encoding trick in [...]

    Pingback by A Challenge « Dreaming In JavaScript — July 6, 2008 @ 12:21 am

  3. Thank you Thomas. It works beautifully.

    Comment by Tony — October 23, 2008 @ 9:25 pm

  4. This is not 100% reliable. Whitespace characters like \n and \r are stripped out, though perversely \t isn’t. Thus ‘One->\r\n\t<-two’ is returned as ‘One->\t<-two’; notice the \n and \r are gone, and the \t is still there unconverted. The double-quote isn’t converted either; probably there are others missed. This is on IE7.

    Comment by M Derrick Glass — November 14, 2008 @ 8:15 pm

  5. And you’ll notice this web site doesn’t properly html-encode its data, as the ampersand g t semi-colon and ampersand l t semi-colon got redisplayed as the decoded equivalents.

    Comment by M Derrick Glass — November 14, 2008 @ 8:17 pm

  6. As with most little tricks like this there are often a few minor issues.

    Actually the one case in which I needed this trick was completely redone recently using .Net 3.5 AJAX code which works out a lot better.

    To fix this problem you could try to use HTML entities instead, such as:

    var source = ‘One->\r\n\t<-two’;
    source.replace(“\”,”\”);
    source = escapeHTMLEncode(source);
    source.replace(“&#92;”,”\”);

    or something to that effect. I haven’t tested the code above but the general concept would help fix it up a bit it.

    Comment by sanzon — November 15, 2008 @ 11:13 pm

  7. I have recently had to work with html encoding and decoding client side with JS due to handling RSS feed content with malformed & double encoded entities.

    The problem with just doing something like

    s = s.replace(/&/g,”&”).replace(/”/i,”"”);

    is that you could end up double encoding existing entities e.g

    “and he cost £200,000k”

    becomes

    "and he cost &pound;200,000k"

    It would be nice if content wasn’t delivered to me in a way that could cause issues like this but I have had it happen.

    I have an encoder object that encodes to numerical entities first and handles double encoding which you can see at

    http://www.strictly-software.com/htmlencode

    Comment by Rob — July 25, 2009 @ 2:26 am

  8. Thank you. Elegant and fast.

    Comment by Andrew Banks — August 11, 2009 @ 7:14 pm

  9. Hi
    It does not work for all cases:

    ‘La vie est “dure. N\’est pas?’

    Comment by Ben — September 2, 2009 @ 9:20 am

  10. This is how to reverse it.

    function unescapeString(str) {
    var div = document.createElement(‘div’);
    div.innerHTML = str;
    return div.firstChild.data;
    }

    Comment by Han — October 30, 2009 @ 1:58 am


  11.       

    Comment by s das — April 22, 2011 @ 5:34 pm

  12. Excellent post. I used to be checking constantly this blog and I’m impressed!
    Extremely useful information specially the ultimate
    section :) I deal with such information much.
    I used to be seeking this certain information for a very long
    time. Thanks and good luck.

    Comment by how to configure best buy modem for comcast xfinity — August 26, 2014 @ 9:13 am

  13. Hi! I could have sworn I’ve been to this site before but
    after browsing through some of the post I realized it’s new to me.

    Nonetheless, I’m definitely delighted I found it and I’ll
    be book-marking and checking back frequently!

    Comment by how to configure best cable best best modem for xbox live — September 20, 2014 @ 8:23 pm

  14. It’s fantastic that you are getting thoughts from this post
    as well as from our dialogue made here.

    Comment by how to configure best cable how to configure modem zyxel — September 28, 2014 @ 5:22 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Silver is the New Black Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: