Now here's a puzzler.....!

[MarcusJT]

It is with great satisfaction that I at last post the first problem that I haven't been able solve myself(!!!), and simultaneously reach my 800th post!

I am trying to get retrieve the inner HTML (i.e. the HTML in between the <a> and </a> tags) of an anchor tag when I click on the link. This should be easy enough to do using the .innerHTML property, and indeed it is most of the time, but there appears to be an exception when it comes to character entities (e.g. "& pound;" - please note that spaces have been intentionally inserted where needed throughout this post in order to overcome the usual shortcomings in vB's handling of HTML code)

At this point I should probably point out that in this particular case I'm not concerned with cross-browser compatibility - I only need this to work in IE4 and up.

Here's some simple test code to demonstrate the problem:

<script language="JavaScript">
	function DisplayValue(obj)
	{
		alert("innerText: " + obj.innerText);
		alert("innerHTML: " + obj.innerHTML);
	}
</script>
<a title="Pound sterling" onClick="DisplayValue(this);" href="#"><b>& pound;</b></a>

So, in theory, when the pound sign is clicked on, two alert boxes should appear - one displaying this:

innerText: £

and the other displaying this:

innerHTML: <b>& pound;</b>

Right?

Wrong, unfortunately!!! The first displays as expected, but the second displays this:

innerHTML: <b>£</b>

So, the question is, how can I obtain the _exact_ HTML that is present between the tags via JavaScript? If .innerHTML doesn't work then what does?

For total clarification, what I want is this:

<b>& pound;</b>

not this:

<b>£</b>

Also, I am well aware that I could do something like this:

<script language="JavaScript">
	function DisplayValue(obj,val)
	{
		alert("innerText: " + obj.innerText);
		alert("innerHTML: " + val);
	}
</script>
<a title="Pound sterling" onClick="DisplayValue(this,'<b>& pound;</b>');" href="#"><b>& pound;</b></a>

but although this works, it is an unnecessary duplication, and not what I want.

You would have thought that returning the unparsed HTML code from the contents of an element would be pretty elementary (pun intended), but it seems that it is not! It must be possible to do such a basic thing!

So, answers on a postcard to the usual address.....!
(Thinking caps on, everyone!)

[MarcusJT]

Anybody out there?

[Flawless_koder]

Out of curiosity i swapped & pound for & #163;

And guess what?!

yes - it didn't work

At least the browser is being consistant

Still looking at it.

Flawless

[Flawless_koder]

I've come up dry so far...

... Might take a look at the W3C specifications for the underlying structure if i get a chance later.

Flawless

[MarcusJT]

Cheers, Flawless - keep trying!

I think I'll send it in to the appropriate MSDN column to see what they say!!

[platinum]

hmmmmmmmmmmmm

*re-reads post*

For the first popup i'm getting

innerText: & pound;

and the second:

innerHTML: <B>&amp; pound;</B>

[Flawless_koder]

Originally posted by M@rco
(e.g. "& pound;" - please note that spaces have been intentionally inserted where needed throughout this post in order to overcome the usual shortcomings in vB's handling of HTML code)

Note his words.

Flawless

[platinum]

whooops...

[MarcusJT]

DOH! Will no-one rid me of this turbulent IE problem?!!
(Have sent an email to Microsoft's WebTeam, perhaps they might come up with something)

[Goof]

Just admit defeat M@rco - it's a feature!

Goof

[MarcusJT]

Admit defeat? Never!

[Goof]

Crazy Brit!

[Andrew-J2000]

I actually mentioned this to m@rco while trying to come up with a solution for this, but i came up as dry as anyone else.

Now if you do something like this

this.parentNode.parentNode.parentNode.innerHTML

microsoft actually interprets the page completely differently as to how you would expect it tobe

with quotes being dropped and attributes capitalised etc, something someone might wanna have a look into.

anyway let me know if you came up with anything

[Flawless_koder]

I think the best you can hope for in this case is a hotfix Marco - and in that case you're stuck anyway.

Best to run regex on it...

matching /&\([^\s]\)\+;/ and then using \1 to put it back in might be enough to trigger the browser to recognise it.

Flawless

[MarcusJT]

Worth a shot, I suppose...! I won't hold my breath though...

[Flawless_koder]

lol - i didn't test that regex ( as per usual )
so let me know if it doesn't work and i'll check it over.

Flawless

[MarcusJT]

Didn't think it would work - the character entities seem to get resolved as the page is rendered, and once that has happened, then nothing can get them back!!!

Microsoft were useless - they couldn't even be arsed to acknowledge the emails I had sent! Just completely ignored me.

However, having thought a little further ahead, I came up with a neat solution to that problem and a related one....

(Incidentally, the reason that I wanted to use character entities in this way is that I was writing a popup panel for my CMS content editor which would let users enter foreign characters and sybols, in a similar way to Windows Character Map.)

Rather than worry about inserting the correct HTML character entities at the point at which they are clicked on in the character map, I am letting the foreign characters go straight through, and I then process the entire HTML page later.

My conversion function works by using a hardcoded associative array (created by using expando properties), and then looping through each foreign character/symbol in the array, replacing each instance of it in the HTML page with the corresponding character entity.

This means that if users enter foreign characters directly into my content editor WITHOUT using my character map (perhaps using a foreign keyboard, or Windows Character Map), then these characters are caught and converted! Thus, no foreign character or symbol survives intact - by the time it reaches the DB for storage, they've all been converted.

I run this filter on the HTML code when the content editor loads, when it saves & closes, and when the user switches to HTML code view (from WYSIWYG mode).

So, in the end the .innerHTML property behaving badly didn't matter, but I would STILL like to know if it is possible to get those character entities back without having to use a lookup table...!

If this explanation isn't clear (I'm in a hurry at the moment), then please say so and I'll elaborate!

Thanks to everyone that tried to help, but it seems that we have been defeated by Microsoft's poor programming yet again!

[Flawless_koder]

Well now you've said that Marco - you'll have to investigate
whether or not this problem comes up in all other browsers...
Not just Microsoft's and Netscape's

Flawless

[MarcusJT]

Well, the .innerHTML is an IE-only feature (although NS6 added it too because developers wanted it so much... perhaps Opera may have done the same).

It might be interesting to know (just for the record), but it's pretty low down on my list of priorities right now....!

If you check it out before I do, please post the results here!

[Flawless_koder]

Like I'm NOT working flat out right as we speak

Flawless

[MarcusJT]

CharEntities.js

//create character entity lookup object
var CharEntities = new Object();

//lowercase foreign characters
CharEntities["à"]="& agrave;"; CharEntities["á"]="&  aacute;"; CharEntities["ä"]="& auml;";
CharEntities["è"]="& egrave;"; CharEntities["é"]="& eacute;"; CharEntities["ë"]="& euml;";
CharEntities["ì"]="& igrave;"; CharEntities["í"]="& iacute;"; CharEntities["ï"]="& iuml;";
CharEntities["ò"]="& ograve;"; CharEntities["ó"]="& oacute;"; CharEntities["ö"]="& ouml;";
CharEntities["ù"]="& ugrave;"; CharEntities["ú"]="& uacute;"; CharEntities["ü"]="& uuml;";
CharEntities["ç"]="& ccedil;"; CharEntities["ÿ"]="& yuml;";

//uppercase foreign characters
CharEntities["À"]="& Agrave;"; CharEntities["Á"]="& Aacute;"; CharEntities["Ä"]="& Auml;";
CharEntities["È"]="& Egrave;"; CharEntities["É"]="& Eacute;"; CharEntities["Ë"]="& Euml;";
CharEntities["Ì"]="& Igrave;"; CharEntities["Í"]="& Iacute;"; CharEntities["Ï"]="& Iuml;";
CharEntities["Ò"]="& Ograve;"; CharEntities["Ó"]="& Oacute;"; CharEntities["Ö"]="& Ouml;";
CharEntities["Ù"]="& Ugrave;"; CharEntities["Ú"]="& Uacute;"; CharEntities["Ü"]="& Uuml;";
CharEntities["Ç"]="& Ccedil;"; CharEntities["Ÿ"]="& Yuml;";

//currencies
CharEntities["£"]="& pound;";
CharEntities["€"]="& euro;";
//doubly escaped because '$' is a special character in regular expressions,
//and is also evaluated as a JS string in the code below!!
CharEntities["\\$"]="& #36;"; 	
CharEntities["¢"]="& cent;";
CharEntities["¥"]="& yen;";

//symbols
CharEntities["°"]="& deg;";
CharEntities["½"]="& frac12;"; CharEntities["¼"]="& frac14;"; CharEntities["¾"]="& frac34;";
CharEntities["±"]="& plusmn;";
CharEntities["“"]="& #8220;"; CharEntities["”"]="& #8221;";
CharEntities["‘"]="& #8216;"; CharEntities["’"]="& #8217;";
CharEntities["–"]="& #8211;";


function ConvertCharsToEntities(str)
{
	for (c in CharEntities)
	{
		re = "/" + c + "/g"
		str = str.replace(eval(re),CharEntities[c])
	}
	return str;
}

example usage:

NewHTML = ConvertCharsToEntities(OldHTML);

Edit:

bloody vB character entity handling..... worked around as per usual (mind the gap! )

[MarcusJT]

Originally posted by Flawless_koder
Like I'm NOT working flat out right as we speak

Flawless

Which is why you're STILL reading & replying to my posts on the forums here.....! lol

[Flawless_koder]

I always make time for Sitepoint while i'm at work...
...
.oO( that'd be 17/7 then - wouldn't it Gareth )

Flawless

[MarcusJT]

Originally posted by Flawless_koder
.oO( that'd be 17/7 then - wouldn't it Gareth )

You've lost me.....!

[Flawless_koder]

I'm at work about 17 hours a day - 7 days a week.
It's a joke Marco

he he

Flawless