Javascript or PHP href string replace

Question

If I have an HTML template like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://example.com/mystyle.css">
    <title>Document</title>
</head>
<body>
<a href="/images/1.png">link text</a> 
<a href="/images/3.png">link text</a>
<a class="link" href="/images/4.png">link</a>
<img src="/img_4.jpg" />
</body>
</html>

How would I isolate and replace all <a> tag hrefs such that https://example.com prepends the relative urls but not absolute urls e.g I'd want the following result:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://example.com/mystyle.css"> ***leave untouched absolute url not relative**
    <title>Document</title>
</head>
<body>
<a href="https://example.com/images/1.png">link text</a> **change**
<a href="https://example.com/images/3.png">link text</a> **change**
<a class="link" href="https://example.com/images/4.png">link</a> **change**
<img src="/img_4.jpg" />  ***leave untouched src not href**
</body>
</html>

I have a dilemma where I'm exploring ideas to prepend a CDN URL to certain file paths in a static HTML, CSS, JS website with thousands of files but I can't use htaccess (LAMP server) or base href (because of navigation). Manually adding links is also a non runner given the scale. Reason I can't use htaccess: Selective url redirect using .htaccess The CMS that generates the static website doesn't have the facility to prepend the CDN url in the file paths either.

Any recommendations greatly appreciated. Thanks

"Manually adding links is also a non runner given the scale." find + sed FTW. — Alex Howansky
– Alex Howansky, Commented Sep 29, 2021 at 14:49

majusebetter · Accepted Answer · 2021-09-29 15:33:47Z

1

As already proposed in the comments, you could use sed for that job in combination with find.

Bash example:

for file in `find . -name *.html`; do sed -E 's/href="\.?(\/[^"]*)"/href="https:\/\/example.com\1"/g' $file; done

By adding the -i option to the sed command, the files will be modified in-place. Use the above command without the -i option for testing purposes.

Input:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://example.com/mystyle.css">
    <title>Document</title>
  </head>
  <body>
    <a href="/images/1.png">link text</a> 
    <a href="/images/3.png">link text</a>
    <a class="link" href="./images/4.png">link</a>
    <img src="/img_4.jpg" />
  </body>
</html>

Output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://example.com/mystyle.css">
    <title>Document</title>
  </head>
  <body>
    <a href="https://example.com/images/1.png">link text</a> 
    <a href="https://example.com/images/3.png">link text</a>
    <a class="link" href="https://example.com/images/4.png">link</a>
    <img src="/img_4.jpg" />
  </body>
</html>

answered Sep 29, 2021 at 15:33

majusebetter

1,6021 gold badge6 silver badges14 bronze badges

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

1 Comment

User301276 Over a year ago

Thanks majusebetter

Mark West · Accepted Answer · 2021-10-04 10:25:59Z

1

In my opinion the easiest solution would be by creating a $baseUrl variable.

In PHP:

$baseUrl = 'https://example.com';

Then in HTML you can do:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://example.com/mystyle.css">
    <title>Document</title>
</head>
<body>
<a href="<?php echo $baseUrl; ?>/images/1.png">link text</a> 
<a href="<?php echo $baseUrl; ?>/images/3.png">link text</a>
<a class="link" href="<?php echo $baseUrl; ?>/images/4.png">link</a>
<img src="/img_4.jpg" />
</body>
</html>

Or in JavaScript you could do the following:

var links = document.getElementsByTagName("a");

Array.from(links).forEach(
    function(element, index) {
        var href = 'base_url' + element.getAttribute("href")
        element.setAttribute('href', href);
    }
);

edited Oct 4, 2021 at 10:25

answered Sep 29, 2021 at 14:53

Mark West

744 bronze badges

2 Comments

User301276 Over a year ago

Thanks but having to manually input <?php echo $baseUrl; ?> into thousands of html pages wouldn't be ideal. I appreciate the idea!

Mark West Over a year ago

I edited the answer with a JavaScript example.

Collectives™ on Stack Overflow

Javascript or PHP href string replace

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related