Function to get HTML entities?

[laredotornado]

Hi,

Is there a Javascript way of taking a string of text and encoding it
such that its HTML entities are represented? For example, "<" would
be represented as "&lt;"?

Thanks, - Dave

 

[Martin Honnen]

Is there a Javascript way of taking a string of text and encoding it
such that its HTML entities are represented? For example, "<" would
be represented as "&lt;"?

Well assuming you have script in the browser and HTML document you can
use an approach like this:

function htmlEscape (string) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(string));
return div.innerHTML;
}

// use like this

htmlEscape('a < b && b > c')

// result: a &lt; b &amp;&amp; b &gt; c


There are however lots of HTML entities defined in the HTML 4 DTD that
the above approach does not cover. So it depends on which characters
exactly you want to replace with entity references.

 

[laredotornado]

laredotornadowrote:

Well assuming you have script in the browser and HTML document you can
use an approach like this:

function htmlEscape (string) {
   var div = document.createElement('div');
   div.appendChild(document.createTextNode(string));
   return div.innerHTML;

}

// use like this

htmlEscape('a < b && b > c')

// result: a &lt; b &amp;&amp; b &gt; c

There are however lots of HTML entities defined in the HTML 4 DTD that
the above approach does not cover. So it depends on which characters
exactly you want to replace with entity references.

Thanks for this excellent function, Martin. Just so the state of the
world is the same as when I entered it, how do I remove the div I
just created from the existing DOM after I get the HTML vals?

- Dave

 

[Martin Honnen]

Thanks for this excellent function, Martin. Just so the state of the
world is the same as when I entered it, how do I remove the div I
just created from the existing DOM after I get the HTML vals?

The div element object is created inside the function but never inserted
anywhere in the document so there is no need to remove it from the document.

 

[Thomas 'PointedEars' Lahn]

Is there a Javascript way of taking a string of text and encoding it
such that its HTML entities are represented? For example, "<" would
be represented as "&lt;"?

The most efficient, reliable and easy to maintain way nowadays is probably

function htmlEncode(s)
{
return s.replace(
/[<>&]/g,
function(m) {
return "&" + m.charCodeAt(0) + ";";
});
}


PointedEars

 

[Thomas 'PointedEars' Lahn]

Well assuming you have script in the browser and HTML document you can
use an approach like this:

function htmlEscape (string) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(string));
return div.innerHTML;
}

This rather bloated, inefficient, and unreliable approach mixes proprietary
and standards-compliant features without previous runtime feature test. It
can be safely recommended against.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Is there a Javascript way of taking a string of text and encoding it
such that its HTML entities are represented? For example, "<" would
be represented as "&lt;"?

The most efficient, reliable and easy to maintain way nowadays is probably

function htmlEncode(s)
{
return s.replace(
/[<>&]/g,
function(m) {
return "&" + m.charCodeAt(0) + ";";
});
}

Supplemental: This does not meet the described outcome exactly, but it works
anyway (sometimes even better than character entity references) and can
easily be extended for other characters.


PointedEars