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
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>
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);
}
);