Javascript/JQuery HTML Encoding

Question

I'm using Javascript to pull a value out from a hidden field and display it on a textbox

The value in the hidden field is encoded.

e.g.

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

gets pulled into

<input type='text' value='chalk &amp; cheese' />

via some JQuery to get the value from the hidden field (Its at this point that I lose the encoding)

$('#hiddenId').attr('value')

The problem is when I read chalk & cheese from the hidden field, javascript seems to lose the encoding, but to escape " and ' I want the encoding to remain.

Is there a Javascript library or a Jquery method that will Html Encode a string?

Answer 1

afaik there isn't any straight forward HTML Encode/Decode methods in javascript.

However, what you can do, is to use JS to create an arbitrary element, set it's inner text, then read it using innerHTML.

say, with jQeury this should work:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

or something along these lines

Answer 2

Prototype has it built-in the String class. So if you are using/plan to use Prototype, it does something like:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

Answer 3

I use these functions:

function htmlEncode(value){ 
  return $('<div/>').text(value).html(); 
} 

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}

Basically a div element is created in memory, but it is never appended to the document.

On the htmlEncode function I set the innerText of the element, and retrieve the encoded innerHTML, on the htmlDecode function I set the innerHTML value of the element and the innerText is retrieved.

Check a running example here.

Answer 4

FWIW, the encoding is not being lost. The encoding is used by the markup parser (browser) during the page load. Once the source is read and parsed and the browser has the DOM loaded into memory, the encoding has been parsed into what it represents. So by the time your JS is execute to read anything in memory, the char it gets is what the encoding represented.

I may be operating strictly on semantics here, but I wanted you to understand the purpose of encoding. The word "lost" makes it sound like something isn't working like it should.

Answer 5

I know this is an old one, but I wanted to post a variation of the answer that will work in IE without removing lines. This should really be a comment on the answer, but I'm not allowed to comment yet. So here it is:

function multiLineHtmlEncode(value) {
        var lines = value.split(/\r\n|\r|\n/);
        for (var i = 0; i < lines.length; i++) {
            lines[i] = htmlEncode(lines[i]);
        }
        return lines.join('\r\n');
    }

    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }