Is there a valid way to include my <span> element within the following JavaScript?

Question

I have this simple little JavaScript snippet to try and protect my email address a little:

<p>Email:<br />
<script type="text/javascript">
    mixupE='mywebsite.com'
    mixupE=('myname' + '<span>@</span>' + mixupE)
    document.write(mixupE)
</script>
</p>

The problem is that it is the only section of code that doesn't validate a xhtml strict. It's to do with the span @ /span part. I have just include the span so that I can style the @ symbol different to the rest of the email address.

Anyone got any better ways of doing this?

Ideally I'd like to get everything to validate :o)

I've solved it by just doing this at the moment:

<p>Email:<br />
        <script type="text/javascript">
            mixupA='name'
            mixupA=('my' + mixupA)
            document.write(mixupA)
        </script><span>@</span><script type="text/javascript">
            mixupB='site.com'
            mixupB=('myweb' + mixupB)
            document.write(mixupB)
        </script>
</p>

Probably not the best way of doing things, but it seems to work and my pages now validate as xhtml strict :o)

Answer 1

Use an indirect way of representing <:

<script type="text/javascript">
  var lt = String.fromCharCode(60);
  mixupE='mywebsite.com'
  mixupE=('myname' + lt + 'span>@' + lt + '/span>' + mixupE)
  document.write(mixupE)
</script>

Answer 2

Here's where I'm at with things guys. I have the following two possibilities that both seem to work and which both validate as strict xhtml.

<script type="text/javascript">
   <!--
   var lt = String.fromCharCode(60);
   mixupE='mywebsite.com'
   mixupE=('myname' + lt + 'span>@' + lt + '/span>' + mixupE)
   document.write(mixupE)
   //-->
</script>

or

<script type="text/javascript">
   //<![CDATA[
   mixupE='mywebsite.com'
   mixupE=('myname' + '<span>@</span>' + mixupE)
   document.write(mixupE)
   //]]>
</script>

Any reasons why I should go for one of these over the other?

Answer 3

Use a combination of CDATA and escapes, as so:

<script type="text/javascript">
//<![CDATA[
mixupE="mywebsite.com";
mixupE=("myname" + "<span>@<\/span>" + mixupE);
document.write(mixupE);
//]]>
</script>

Answer 4

The simplest answer is just to split up the strings so it doesn't think it's an entity. This is perfectly valid, and almost identical to you original:

<p>Email:<br />
<script type="text/javascript">
    mixupE='mywebsite.com'
    mixupE=('myname<' + 'span>@<' + '/span>' + mixupE)
    document.write(mixupE)
</script>
</p>

There's no need to obfuscate the angle bracket.

But don't forget your var and ;. Simplified it's:

<p>Email:<br />
<script type="text/javascript">
    var mixupE='mywebsite.com';
    document.write('myname<' + 'span>@<' + '/span>' + mixupE);
</script>
</p>

Answer 5

You need to wrap the element in a CDATA block as described in the section of the specification on the differences between HTML and XHTML, specifically the script and style elements section.

However, you are almost certainly serving your XHTML up with a text/html Content-Type, so you need to jump through the hoops of making it HTML-like enough to continue to work cross-browser. In this case, by commenting out the CDATA markers.

<script type="text/javascript">
    //<![CDATA[
    mixupE='mywebsite.com'
    mixupE=('myname' + '<span>@</span>' + mixupE)
    document.write(mixupE)
    //]]>
</script>