JavaScript/jQuery manipulate and then replace all links in my HTML content

Question

I am trying to write a script that, after the page load, will replace all my existing links with links in a different format.

However, while I've managed to work out how to do the link string manipulation, I'm stuck on how to actually replace it on the page.

I have the following code which gets all the links from the page, and then loops through them doing a regular expression to see if they match my pattern and then if they do taking out the name information from the link and creating the new link structure - this bit all works. It's the next stage of doing the replace where I'm stuck.

var str;
var fn;
var ln;
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {

    str = links[i].href.match(/\/Services\/(.*?)\/People\/(.*?(?=\.aspx))/gi);

    if (links[i].href.match(/\/Services\/(.*?)\/People\/(.*?(?=\.aspx))/gi)) {
        var linkSplit = links[i].href.split("/");

        // Get the last one (so the .aspx and then split again).
        // Now split again on the .
        var fileNameSplit = linkSplit[linkSplit.length-1].split(".");

        var nameSplit = fileNameSplit[0].split(/(?=[A-Z])/);

        fn = nameSplit[0];
        ln = nameSplit[1];
        if(nameSplit[2]){
            ln += nameSplit[2];
        }

        // Build replacement string
        var replacementUrl = 'https://www.testsite.co.uk/services/people.aspx?fn='+fn+'&sn='+ln;

        // Do the actual replacement
        links[i].href.replace(links[i].href, replacementUrl);
    }

I've tried a couple of different solutions to make it do the actual replacement, .replace, .replaceWith, and I've tried using a split/join to replace a string with an array that I found here - Using split/join to replace a string with an array

var html = document.getElementsByTagName('html')[0];
var block = html.innerHTML;
var replace_str = links[i].href;
var replace_with = replacementUrl;

var rep_block = block.split(replace_str).join(replace_with);

I've read these, but had no success applying the same logic:

How can I fix this problem?

@Paul's answer is correct. Note that replace doesn't modify the string you apply it to, rather it returns a new string with the replacement in it. You would then still need to assign it to .href in the same manner. — James Thorpe
– James Thorpe, Commented Nov 24, 2014 at 14:35
Thanks, I didn't realise that. I assumed that once the replace had been run that it would apply to the html - but it does make a lot more sense that it would need to be applied back to the .href - thanks for the information! — hlh3406
– hlh3406, Commented Nov 24, 2014 at 14:43

Paul Roub · Accepted Answer · 2014-11-24 14:33:21Z

4

It's simpler than that:

links[i].href = replacementUrl;

answered Nov 24, 2014 at 14:33

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript/jQuery manipulate and then replace all links in my HTML content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related