I am trying to replace the url values on the entire page using some vanilla Javascript. I cannot use ANY library/framework. Here's what I have so far which has been placed at the top of each page between the tags:

<script type="text/javascript">
function change_url() {
    var str = '';
    str = str.replace(/blog\.domain\.info/g, 'blogtest\.domain\.info');
}
change_url();
</script>

However, this isn't working when the page loads.

Basically, I need resource links to go from to . Simple task, I know! But the code above isn't working so far.

Suggestions on what to change?

I am trying to replace the url values on the entire page using some vanilla Javascript. I cannot use ANY library/framework. Here's what I have so far which has been placed at the top of each page between the tags:

<script type="text/javascript">
function change_url() {
    var str = '';
    str = str.replace(/blog\.domain\.info/g, 'blogtest\.domain\.info');
}
change_url();
</script>

However, this isn't working when the page loads.

Basically, I need resource links to go from http://blog.domain.info to http://blogtest.domain.info. Simple task, I know! But the code above isn't working so far.

Suggestions on what to change?

• javascript
• regex

• 3 "vanilla Javascript" - you are making your life harder than necessary. jQuery etc. ftw! – ThiefMaster Commented Feb 8, 2011 at 23:43
• Do you mean just <a> anchors, or are you including all images, and other entities such as stylesheets, javascript files, etc? – Orbling Commented Feb 8, 2011 at 23:46
• Can't use any type of framework/library...HAS to be vanilla. – JsusSalv Commented Feb 8, 2011 at 23:46
• @Orbling Everything! a href, link, src....EVERYTHING. Is it possible? – JsusSalv Commented Feb 8, 2011 at 23:47
• I'll answer as an answer, novel approach I know, started in a comment and then I gibbered on too long. – Orbling Commented Feb 8, 2011 at 23:59

4 Answers 4

After reading your comment, you need something like

function replace_url(elem, attr) {
    var elems = document.getElementsByTagName(elem);
    for (var i = 0; i < elems.length; i++)
        elems[i][attr] = elems[i][attr].replace('blog.domain.info', 'blogtest.domain.info');
}

window.onload = function() {
    replace_url('a', 'href');
    replace_url('img', 'src');
    // etc
}

If you're targeting links, you can do this:

<script type="text/javascript">
    var els = document.getElementsByTagName('a'),
        len = els.length;

    while( len-- ) {
        els[len].hostname = els[len].hostname.replace('blog.domain.info','blogtest.domain.info');
    }
</script>

Place this script just inside the closing </body> tag.

For additional tags, specify the tag name and property you're updating.

Well, it is very difficult, as how do you get items in the header to be altered before they are encountered? If you can force your JS to run before load, perhaps, but I doubt it. You could go along post-load, find the entries, rewrite them and load them asynchronously, but code may well miss initialisation events that way. It'll get complicated.

Elements can be addressed using the getElementsByTagName() approach that other answers mention. This is fine for src/href changes, but will not take care of CSS imagery, background-image in particular, which can occur on a lot of elements. Then there is the issue of such things attached to classes, which will require scouring of class entries, which is a pain. I doubt altering meta information like RSS feeds, favicons, etc, will take effect post load.

It would be better to handle it server-side really.

I’m way too late for the party but hope this helps someone else.

Your code is perfect, it just needs the text to work on and a way to feed it back so this is what I would do, mind you I’m not an expert just a fiddler.

<script type="text/javascript">
//added “str” as a function input/parameter
function change_url(str) {
    /* removed this
    var str = ''; */
    /* changed this
    str = 
    to this */
    return str.replace(/blog\.domain\.info/g, 'blogtest\.domain\.info');
}
//and called it like this
document.onload = function(){
    document.getElementsByTagName('head')[0].outerHTML = change_url(document.getElementsByTagName('head')[0].outerHTML);
}
</script>

And if you wanted to change all references on the entire document than you would just call it like this.

document.onload = function(){
    document.getElementsByTagName('head')[0].outerHTML = change_url(document.getElementsByTagName('head')[0].outerHTML);
    document.getElementsByTagName('body')[0].outerHTML = change_url(document.getElementsByTagName('body')[0].outerHTML);
}

This will change all reference to blog.domain.info in src, href, img, and any instance found in !!TEXT!!. So be careful using it, because all forementioned references will be changed. ;o)