Member Avatar for R0bb0b

anybody have a browser compatible html entity decoding function?

  • 1 Contributor
  • 2 Replies
  • 574 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by R0bb0b

Dani AI

Generated

Nice find — your textarea trick works because the browser parses entities when it parses HTML, but touching a textarea's innerHTML can be fragile in some IE builds. A simpler, more modern approach is to let the browser parse the string with the HTML parser (via DOMParser) and then read the decoded text from textContent; fall back to a detached div for older browsers.

function decodeHtmlEntities(str) {
  if (!str) return str;
  if (typeof DOMParser !== 'undefined') {
    var doc = new DOMParser().parseFromString(str, 'text/html');
    return doc && doc.body ? doc.body.textContent : doc.documentElement.textContent;
  }
  var div = document.createElement('div'); // not attached to document
  div.innerHTML = str;
  return div.textContent || div.innerText || '';
}

DOMParser.parseFromString(..., 'text/html') parses entities and gives a document you can read from; that keeps the code small and avoids creating visible elements. (developer.mozilla.org)

Support for parseFromString(..., 'text/html') is good in modern browsers but not universal in very old browsers (keep the detached-div fallback if you need IE9/older). (caniuse.com)

Use textContent (not innerHTML) to get plain decoded text; it returns the node text without interpreting it as live HTML. Also be careful with untrusted input: inserting HTML into the DOM (even via a temporary element) carries XSS risk if you later attach it or process it incorrectly — prefer textContent and server-side validation for any user-supplied content. (developer.mozilla.org)

If you still need to support very old browsers and hit odd runtime errors, the strategy in your try/catch (create a detached element inside a hidden container, read its text, then clear it) is a practical fallback — but the DOMParser + detached div approach above is cleaner and easier to audit.

Member Avatar for R0bb0b

Found this online and it seems like they all use this concept.

function html_entity_decode(str)
{
    //jd-tech.net
    var  tarea=document.createElement('textarea');
    tarea.innerHTML = str; return tarea.value;
    tarea.parentNode.removeChild(tarea);
}

apparently the innerHTML is giving me a runtime error on ie, i can only use value. But value doesn't decode the html entities.

Member Avatar for R0bb0b

Found a solution:

function html_entity_decode(str)
{
    try
	{
		var  tarea=document.createElement('textarea');
		tarea.innerHTML = str; return tarea.value;
		tarea.parentNode.removeChild(tarea);
	}
	catch(e)
	{
		//for IE add <div id="htmlconverter" style="display:none;"></div> to the page
		document.getElementById("htmlconverter").innerHTML = '<textarea id="innerConverter">' + str + '</textarea>';
		var content = document.getElementById("innerConverter").value;
		document.getElementById("htmlconverter").innerHTML = "";
		return content;
	}
}

this way you can still add the innerHTML, but to a div instead, and it also adds a textarea with it so it can be retrieved by the value of the textarea. then it clears out the div and leaves it blank.
Cat skinned.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.