Replacing links detected in a HTML with other links using JS

I'm having a bit of trouble figuring out how to do this one.

Here's the scenario. My e-commerce site has a blog with a lot of content, promoting the products I sell, reviewing them etc. 99% of the posts on the blog link back to the products the开发者_JAVA百科y are talking about.

I'm going to be changing the URL where my ecommerce system is located. Therefore my blog is going to end up sending people to a lot of 404 pages.

The idea I've had is to be able inclue a JS file which will on load, scan the document for existing links then, if found, swap them out with ones which are now correct.

I hope this make sense.

Cheers, Jim

This is pretty simple to do in jQuery; but a bad idea on multiple levels. The first being as ItzWarty said, users with JavaScript disabled will still get 404's.

Another being that web spiders such as GoogleBot don't execute JavaScript, so they'll see 404's too- ruining your SEO; when migrating content to a new URL you should 301 redirect (moved permanently) the old URLs to the new location if you have any interest in retaining your search rankings.

If you are going to create the JavaScript to redirect, why not just create a batch process to update all those files/links.

I am assuming these are static text files, if it is database driven it is also achievable.

In your blog pages stick this simple piece of code at the end of the pages just before the tag.

<script type="text/javascript">
   var collection = document.getElementsByTagName('a'),
   old_url = "http://www.myoldurl.com", //place here you old url
   new_url = "http://www.mynewurl.com", //place here your new url
   i, len = collection.length;
   for(i = 0; i < len; ++i)
      if(collection[i].href)
         collection[i].href = collection[i].href.replace(old_url, new_url);
</script>

Since you are using a blog, you simply need to stick this piece of code once for all in the layout/template page of the blog thus the code will be inserted on each page just befor ethe tag.