Question

I’m doing Ajax get to fetch cross browser data, in this case from cnn.com:

   $(function(){

    var site = 'http://cnn.com/';

    $.get('proxy.php', { site:site }, function(data){

    $(data).find('a').attr('href', function(_, href){
         return href.replace(/\/\/[^\/]+/, '//cnn.com')
    }); 

    $('#result').append(data);


    }, 'html');

    });

As you can see there is a piece of code which is able to replace part of the url with ‘cnn.com’, this is necessary because the url path is often attach to my website domain.
The problem is that the replace function doesn’t seem to work. I’m not getting any errors in console, so I suspect I have to put the code somewhere else. Another possibility is that the code cannot find a because the Ajax loading data process is not complete. I tried fixing it with event ajaxComplete with no luck.
What do I have to change in the code in order for the function to find a and replace it?

ps I know there is a piece of proxy.php code but I rather do this on the browser side (javascript/jquery)

Answer 1

You are creating a jQuery object, manipulating the elements, but you are not appending that and finally data remains unchanged, try this:

$(data).find('a').attr('href', function(_, href){
     return href.replace(/\/\/[^\/]+/, '//cnn.com')
}).end().appendTo('#result');