jquery or js: replace a link site-wide with another AND change to https

Question

I want to change every instance of

http[s]://www.mydomain.com/test/index.php?this_page=foo

to

https://www.mydomain.com/test/index.php?this_page=bar

I think its must be able to be done with attr.replace but I can't figure out the notation. How can I do this with jQuery or JavaScript?

EDIT: it seems everyone so far is either missing the first part (http OR https changes to https) or the second part (foo to bar) :) Sorry for confusion

Answer 1

You could do:

$('a[href$="://www.mydomain.com/test/index.php?this_page=foo"]')
    .attr('href', 'https://www.mydomain.com/test/index.php?this_page=bar');

The attribute-ends-with selector ^[docs] is a native CSS3 selector, so selecting these elements should be quite fast. Of course you could also use a regular expression for the http[s] part and, eg, .filter , but that is likely to be slower (also depends on the number of links you have).

In case the URL contains other parameters which should also be part of the new URL, you have to process each link individually:

// Using the attribute-contains selector now. This still assumes that 
// `this_page=foo` is the first parameter in the URL
var pattern = /^https?:\/\/www.mydomain.com/test/index.php?this_page=foo(&|$)/;
$('a[href*="://www.mydomain.com/test/index.php?this_page=foo"]')
  .attr('href', function(i, val) {
      return val.replace(pattern, 'https://www.mydomain.com/test/index.php?this_page=bar$1');
  });

If this_page can be anywhere in the URL, you can get all links that contain this_page=foo and the base URL. This works only if there is no other page value which starts with foo :

var pattern_page = /([?&])this_page=foo(&|$)/;

$('a[href*="://www.mydomain.com/test/index.php?"][href*="this_page=foo"]')
  .attr('href', function(i, val) {
      return val.replace('http:', 'https:')
                .replace(pattern_page, '$1this_page=bar$2');
  });

Answer 2

The general syntax would be something like:

$('a').prop('href', function(index, value) {
    return newValue;
});

where the calculation of newValue will depend on exactly how you want to transform the URL, ie something like:

$('a').prop('href', function(index, value) {
    if (value.match(/=foo\??/) {
        value = value.replace(/=foo\??/, '=bar?').replace(/^http:/, 'https:');
    }
    return value;
});       

I've used .prop() rather than .attr() because it seems like you want to access the fully qualified URL. Using the property rather than the attribute will give you that - the attribute won't always include the URL scheme.

Answer 3

replace all instances!!

$("a").each(function() {
    if ($(this).attr("href") == 'http[s]://www.mydomain.com/test/index.php?this_page=foo') {
        $(this).attr('href', 'https://www.mydomain.com/test/index.php?this_page=foo');
    }
});​

Answer 4

Assuming this is contained in the href attribute of links, try the following:

$("a").each(function() {
    if($(this).attr("href").indexOf("http:") != -1) {
        $(this).attr("href", $(this).attr("href").replace("http", "https"));
    }
});

There may be more efficient ways, but this should do the trick.

Regards, Richard

Answer 5

This will replace all http references in anchors with https across the entire page.

​$.each($('a'), function(i,v){
  var oldULR =  $(v).attr('href');
  var newURL = oldULR.replace('http', 'https');
  $(this).attr('href', newURL);

})​;​

FIDDLE: http://jsfiddle.net/bkNLD/

Answer 6

In plain JavaScript, you could use:

var links = document.links;

for (var i = 0, len = links.length; i < len; i++) {
    href = links[i].href;
    if (href.indexOf('https') == -1) {
        links[i].href = href.replace('http', 'https');
        href = links[i].href;
    }
    if (href.split('=')[1] == 'foo'){
        links[i].href = href.replace('foo','bar');
    }
}​

JS Fiddle demo .

In the above I've worked under the, probably wrong, assumption that the two replacements weren't necessarily mutually-dependent. If they are, then it becomes simpler:

var links = document.links;

for (var i = 0, len = links.length; i < len; i++) {
    href = links[i].href;
    if (href.indexOf('https') == -1 && href.split('=')[1] == 'foo') {
        links[i].href = href.replace('http', 'https');
        links[i].href = href.replace('foo','bar');
    }
}​

JS Fiddle demo .

Answer 7

For anyone else finding this and was as much a noob as I... this is the solution I ended up using.

$(document).ready(function(){ 
  $('a[href*="this_page=foo"]').prop('href', function(index, value) {
  return value.replace(/=foo/, '=bar').replace(/^http:/, 'https:');
  });
});

it is a combination of Felix Kling's and Alnitak's and my big thanks to both of them.