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 eg 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
2 answers
solution1
1 2021-09-29 14:53:50
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);
}
);
solution2
1 2021-09-29 15:33:47
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.