Geek Answers Handbook

Change ALL links, hrefs, urls with vanilla Javascript & regex

I am trying to replace url values ​​on the whole page using some vanilla Javascript. I can not use ANY library / framework. Here is what I have so far placed at the top of each page between 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 does not work when loading the page.

Basically, I need resource links to go from http://blog.domain.info to http://blogtest.domain.info . A simple task, I know! But the code above is still not working.

Suggestions on what to change?

+6
javascript regex
source share
4 answers

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 }
+14
source share

If you are 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>

Only place this script inside the closing </body> .

For additional tags, specify the name and properties of the tag that you are updating.

+2
source share

Well, this is very complicated, since you get the elements in the header that need to be changed before they are detected? If you can get JS to work before loading, maybe, but I doubt it. You can do post-loading, find records, overwrite them and load them asynchronously, but the code can also skip initialization events. This will get complicated.

Elements can be resolved using the getElementsByTagName() approach, which is mentioned by other answers. This is normal for src/href changes, but will not care about CSS images, in particular, background-image , which can happen on many elements. Then the question arises of such things related to classes, which would require cleaning class records, which is a pain. I doubt the change of meta information, such as RSS feeds, icons, etc., Effective after downloading.

It would be better to handle this on the server side.

0
source share

I'm too late for the party, but hope this helps someone else.

Your code is perfect, it just needs text to work and a way to feedback it, so this is what I would like to do, mind you, I'm not an expert, but just a violinist.

 <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 want to change all the links to the entire document, then you would simply call it that.

 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 the entire link to blog.domain.info in src, href, img and any instance found in !! TEXT !!. So be careful when using it, because all of the above links will be changed. ; ABOUT)

0
source share

More articles:


All Articles