How to HttpUtility.HtmlDecode in javascript

Question

I have a localStorage holding a string that looks like the follows:

  "ABC&nbps;&nbps;&nbps;&nbps;ABC Description"

I get this string from the localStorage and I need to set the value of this string into an Option of a drop-down control, replacing the no-break space entity with empty spaces (in order to align with other options).

In the code behind of ASP.NET I would use HttpUtility.HtmlDecode. But how do you decode this string in the javascript?

Possible duplicate of [HTML Entity Decode](http://stackoverflow.com/questions/5796718/html-entity-decode) — jacmkno, Nov 29 '15 at 01:32

score 4 · Accepted Answer · answered Nov 29 '15 at 01:15

4

You can use the following bit of code to convert HTML to text (using just javascript)

 var span = document.createElement("SPAN");
 span.innerHTML = "ABC&nbsp;&nbsp;&nbsp;&nbsp;ABC Description";
 alert(span.innerText);

It creates a dummy element, sets its HTML to your HTML and extracts the text.

Note that it should be nbsp (non-breaking space) and not nbps

That said, the way you are doing this suggests that you are allowing the user to enter arbitrary HTML. This is not a good idea in terms of security (a user could put in malicious HTML into this field).

answered Nov 29 '15 at 01:15

potatopeelings

40,709
7
95
119

Thank you. It was a typo and the example I used is just a simplified case. So thank for the warning of security. – Hidalgo Nov 29 '15 at 01:42
Cheers! No worries then :-) – potatopeelings Nov 29 '15 at 01:47
If I may ask a follow up question, to help me understand html better. In my text I was using property .text and trying to manipulate the string any way possible without much success. You used property .innerHTML. Does it mean that the .innerHTML converted the string into the plane string of .text? – Hidalgo Nov 29 '15 at 01:49
The content you have is HTML. So what we do is just create a DOM element with its HTML set to that content. Now, what you need as output is the text of that DOM element - which we just get using innerText. innerHTML and innerText are properties of DOM elements - so the browser takes care of doing the actual conversion. – potatopeelings Nov 29 '15 at 05:35
Thank you so much for the explanation. – Hidalgo Nov 29 '15 at 12:37

score 1 · Answer 2 · edited May 23 '17 at 12:23

This was answered before here. But it's   not &nbps;. To decode wrong markup with &nbps; on it, you will have to do a manual replace: whatever.replace('&nbps;', ' ');

It's safer to strip script tags instead of having the browser parse the raw HTML. That will prevent malicious code from being executed...

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

I agree with you. Makes sense. Thank you. – Hidalgo Nov 29 '15 at 01:59 — Hidalgo, Nov 29 '15 at 01:59

score 0 · Answer 3 · answered Nov 29 '15 at 01:19

0

If you are using Jquery on the client side use this to convert into html.

theHtml = $.parseHTML( "ABC&nbsp;&nbsp;&nbsp;&nbsp;ABC Description" );

answered Nov 29 '15 at 01:19

Cyril Cherian

32,177
7
46
55

How to HttpUtility.HtmlDecode in javascript

3 Answers3

Linked