tag:blogger.com,1999:blog-865923359735383241.post5926775280200447066..comments2023-10-29T07:27:09.012-06:00Comments on Ccna final exam - java, php, javascript, ios, cshap all in one: JavaScript/jQuery HTML EncodingUnknownnoreply@blogger.comBlogger8125tag:blogger.com,1999:blog-865923359735383241.post-19206775758282760132012-05-31T19:40:13.468-06:002012-05-31T19:40:13.468-06:00afaik there isn't any straight forward HTML En...afaik there isn't any straight forward HTML Encode/Decode methods in javascript.<br /><br />However, what you can do, is to use JS to create an arbitrary element, set it's inner text, then read it using innerHTML. <br /><br />say, with jQuery this should work:<br /><br />var helper = $('chalk & cheese').hide().appendTo('body');<br />var htmled = helper.html();<br />helper.remove();<br /><br /><br />or something along these linesUserhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-10890724820384219932012-05-31T19:40:12.575-06:002012-05-31T19:40:12.575-06:00FWIW, the encoding is not being lost. The encodin...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.<br /><br />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.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-21746535852375177192012-05-31T19:40:11.870-06:002012-05-31T19:40:11.870-06:00Prototype has it built-in the String class. So if ...Prototype has it built-in the String class. So if you are using/plan to use Prototype, it does something like:<br /><br />'<div class="article">This is an article</div>'.escapeHTML();<br />// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-55891028703380822992012-05-31T19:40:10.957-06:002012-05-31T19:40:10.957-06:00Do NOT use the innerHTML method (the jQuery .html(...Do NOT use the innerHTML method (the jQuery .html() method uses innerHTML), as on some (I've only tested Chrome) browsers, this won't escape quotes, so if you were to put your value into an attribute value, you would end up with an XSS vulnerability.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-63809257109232483672012-05-31T19:40:09.872-06:002012-05-31T19:40:09.872-06:00Good answer. Note that if the value to encode is u...Good answer. Note that if the value to encode is undefined or null with jQuery 1.4.2 you might get errors such as:<br /><br />jQuery("<div/>").text(value).html is not a function<br /><br />OR<br /><br />Uncaught TypeError: Object has no method 'html'<br /><br />The solution is to modify the function to check for an actual value:<br /><br />function htmlEncode(value){ <br /> if (value) {<br /> return jQuery('<div/>').text(value).html(); <br /> } else {<br /> return '';<br /> }<br />}Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-72286603877943647012012-05-31T19:40:08.194-06:002012-05-31T19:40:08.194-06:00I know this is an old one, but I wanted to post a ...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:<br /><br />function multiLineHtmlEncode(value) {<br /> var lines = value.split(/\r\n|\r|\n/);<br /> for (var i = 0; i < lines.length; i++) {<br /> lines[i] = htmlEncode(lines[i]);<br /> }<br /> return lines.join('\r\n');<br /> }<br /><br /> function htmlEncode(value) {<br /> return $('<div/>').text(value).html();<br /> }Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-78998190498195983672012-05-31T19:40:06.787-06:002012-05-31T19:40:06.787-06:00The jQuery trick doesn't encode quote marks an...The jQuery trick doesn't encode quote marks and in IE it will strip your whitespace.<br /><br />Based on the escape templatetag in Django, which I guess is heavily used/tested already, I made this function which does what's needed.<br /><br />It's arguably simpler (and possibly faster) than any of the workarounds for the whitespace-stripping issue - and it encodes quote marks, which is essential if you're going to use the result inside an attribute value for example.<br /><br />function htmlEscape(str) {<br /> return String(str)<br /> .replace(/&/g, '&amp;')<br /> .replace(/"/g, '&quot;')<br /> .replace(/'/g, '&#39;')<br /> .replace(/</g, '&lt;')<br /> .replace(/>/g, '&gt;');<br />}<br /><br /><br />Update:<br />jsperf tests show this method is fast and possibly the fastest option if you're in a recent browser versionUserhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-46127112327542790902012-05-31T19:40:05.424-06:002012-05-31T19:40:05.424-06:00I use these functions:
function htmlEncode(value)...I use these functions:<br /><br />function htmlEncode(value){<br /> return $('<div/>').text(value).html();<br />}<br /><br />function htmlDecode(value){<br /> return $('<div/>').html(value).text();<br />}<br /><br /><br />Basically a div element is created in memory, but it is never appended to the document.<br /><br />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.<br /><br />Check a running example here.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.com