Is there a valid way to include my 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)

`document.write` isn't advisable , instead set the innerHTML — Clyde Lobo, Jan 31 '11 at 04:23
i can suggest a better way of protecting your email address: invert your email address(either by js or hardcoding it or by using your backend's string invert) then re-invert it using the css: rtl property so real people can actually read it right, while spam bots read it inverted. — corroded, Jan 31 '11 at 06:13
How about if I was to do what I'm doing now with js, but write the letters backwards to have it show it inverted and then re-invert it with css later? Sound good? — ade123, Jan 31 '11 at 06:47
Backwards text screws up Copy + Paste. It shows up backwards when you paste it, but looks okay on the webpage. — Blender, Feb 01 '11 at 02:21
Thanks blender! You're right! I think I'll change my text to the right way round again, as copy + paste is pretty important in my view :o) — ade123, Feb 01 '11 at 04:10

Quentin · Answer 1 · 2011-01-31T10:25:50.577

3

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>

edited Jan 31 '11 at 10:25

answered Jan 31 '11 at 07:10

Quentin

914,110
126
1,211
1,335

Isn't the ending script tag duplicated? – David Mårtensson Jan 31 '11 at 10:19
I don't fully understand this yet, but I'm going to look into it. I guessed that that it was basically some kind of nesting error relating to the fact that you're not really supposed to have a span element within a script element. Thanks for your help everyone :o) – ade123 Feb 01 '11 at 04:17

Jason LeBrun · Accepted Answer · 2011-01-31T06:03:54.017

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>

edited Jan 31 '11 at 06:03

answered Jan 31 '11 at 04:26

Jason LeBrun

13,037
3
46
42

This sounded good, but doesn't seem to work for some reason? It's not showing the email address when the xhtml page is loaded. Hmmm...? – ade123 Jan 31 '11 at 04:37
Sorry, `String.fromCharCode(60)` – Jason LeBrun Jan 31 '11 at 06:03
ahh... ok this does work now, thanks :o) I might try this rather than the rather long winded fix that I just added as an update to my original question. – ade123 Jan 31 '11 at 06:41
I just up voted it for you. I thought it was a good answer! :o) – ade123 Feb 01 '11 at 04:43
Would it be a good idea to include the CDATA blocks along with this code? – ade123 Feb 01 '11 at 07:22

score 0 · Answer 3 · answered Feb 12 '14 at 22:27

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>

score 0 · Answer 4 · answered Feb 01 '11 at 04:30

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?

Kevin Ji · Answer 5 · 2011-03-23T17:12:23.630

0

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>

edited Mar 23 '11 at 17:12

answered Feb 21 '11 at 22:59

Kevin Ji

10,479
4
40
63

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

5 Answers5