HTML-encoding lost when attribute read from input field

Question

I’m using JavaScript to pull a value out from a hidden field and display it in a textbox. The value in the hidden field is encoded.

For example,

<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 (it’s at this point that I lose the encoding):

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

The problem is that when I read chalk &amp; cheese from the hidden field, JavaScript seems to lose the encoding. I do not want the value to be chalk & cheese. I want the literal amp; to be retained.

Is there a JavaScript library or a jQuery method that will HTML-encode a string?

Answer 1

Try the code given below:

function htmlEncode(value){

  // Create a in-memory element, set its inner text (which is automatically encoded)

  // Then grab the encoded contents back out. The element never exists on the DOM.

  return $('<textarea/>').text(value).html();

}

function htmlDecode(value){

  return $('<textarea/>').html(value).text();

}

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