HTML-encoding lost when attribute read from input field
escaping, html, html-escape-characters, javascript, jquery
Solution
EDIT: This answer was posted a long ago, and the `htmlDecode` function introduced a XSS vulnerability. It has been modified changing the temporary element from a `div` to a `textarea` reducing the XSS chance. But nowadays, I would encourage you to use the DOMParser API as suggested in other anwswer.
I use these functions:
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();
}
Basically a textarea 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.
Problem
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 & cheese' /> ``` gets pulled into ``` <input type='text' value='chalk & 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 & 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?