jQuery AJAX Request Strips Joomla Email Protection Script

I am using $.ajax to load the content of pages in my Joomla installation into the page. This is working well, but I have some email addresses on the page, and Joomla's email cloaking plugin automatically scrambles them and replaces them with JavaScript to discourage spambots. When I load the page with jQuery, the <script> tags aren't loaded/executed and I am left with:

This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

When the code that should be executed is:

<script language='JavaScript' type='text/javascript'> 
  // Some email display code
  document.write( '<a ' + path + '\'' + prefix + addy10641 + suffix + '\'' + attribs + '>' );
  document.write( addy10641 );
  document.write( '<\/a>' );
</script>This e-mail address is being protected from spambots. You need JavaScript enabled to view it
<script language='JavaScript' type='text/javascript'> 
  // Some email display code
</script>.

My code is as follows:

$.ajax({
        url: fetchUrl,
        type: "GET",
        dataType: "html",
        timeout: 4000,
        error: function() {
            location.href = fetchUrl;
        },
        success: function(response) {
            $("#content *").fadeOut(function() {
                $("#content *").remove();
                parsedResponse = $(response).filter("#content")[0].innerHTML;
                alert(parsedResponse); // This DOES NOT show the <script> tags
                $("#content")[0].innerHTML = parsedResponse开发者_开发问答;
            });
        }
});

Any ideas as to how to solve this?

Joomla is doing it. Here's how to stop it from filtering out script tags: http://docs.joomla.org/Why_does_some_HTML_get_removed_from_articles_in_version_1.5.8%3F

Also, why isn't the text "This e-mail address is being protected from spambots. You need JavaScript enabled to view it" inside of a <noscript></noscript> (at the very least) or why aren't you using some JavaScript dependent function to hide the text? Because, what you've posted above will always display. For that matter, someone who can view the content of your AJAX request without JavaScript enabled is already clever enough that they won't need an explanation :-)

Lastly, why are you using document.write instead of the more clear and versatile: document.getElementById(yourId).innerHTML = "your@email.com"; And putting the inserting the email into a span or a div. If you put it inside of a span or div with an id, this also allows you to control the appearance via CSS and just seems less primitive than plain old document.write

Again, for that matter, why not just return the email in a JSON object and have your AJAX function read the JSON and insert it into a div or a span on the page? Much cleaner and elegant than returning raw HTML.

EDIT: Sorry, I see that you are sending JavaScript for JQuery to presumably eval and THEN you're using document.getElementById. Don't do that. Here's what your request should return (and sorry, but I don't know exactly what your variable names mean, so I'm just making stuff up):

{
"path": "/home",
"prefix": "/users/",
"email":"someemail@gmail.com",
"suffix": "/stuff/",
"attribs": "yourattribs-could-be-a-nested-array-of-values" 
}

Your JQuery code should be something like:

success: function(res) {
        if (res) {
        $("#content").fadeOut(function() {
            $("#content").remove();
            var link = '<a href="' + res.path + res.prefix + res.email + res.suffix + res.attribs + '">' + res.email + '</a>';
            $("#content")[0].html(link);
        }
        });
 }

document.write does not work after the page has loaded; it is designed to insert HTML while the page is loading. Also, scripts inserted using innerHTML do not execute. I suppose the best way to deal with this (short of turning off e-mail cloaking or making other server-side changes) is to inject the code into an iframe and then use the innerHTML of that:

function removeDocumentWrite(input) {
    var ifr = $('<iframe style="display:none"/>').appendTo('body'),
        doc = ifr[0].contentDocument;
    doc.write('<html><body>' + input + '</body></html>');
    doc.close();
    ifr.contents().find('script').remove();
    var html = doc.body.innerHTML;
    ifr.remove();
    return html;
}

$("#content").html(removeDocumentWrite(parsedResponse));

Or use a function like this (untested example) to manually search for script tags and execute them within the parsed response:

function removeDocumentWrite(input) {
    input.replace(/<script.*?>([\s\S]*?)<\/script>/gi, function(str, p1) {
        var html = '';
        document.write = function(t) {
            html += t;
        };
        return new Function(p1.replace(/<!--|-->/g, ''))();
    });
}

$("#content").html(removeDocumentWrite(parsedResponse));

Edit: Added iframe method