Javascript或PHP的href字符串替换

如果我有一个HTML模板，如:

<!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>

我如何隔离和替换所有的<a>标签href，使https://example.com前缀相对url，而不是绝对url，例如我想要以下结果:

<!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>

我有一个困境，我正在探索在静态HTML, CSS, JS网站中添加CDN URL到某些文件路径的想法，其中包含数千个文件，但我不能使用htaccess (LAMP服务器)或base href(因为导航)。手动添加链接也是一个非运行给定的规模。原因我不能使用htaccess:选择性url重定向使用。htaccess生成静态网站的CMS也没有在文件路径中添加CDN url的功能。

非常感谢任何建议。由于

正如已经在评论中提出的那样，您可以将sed与find结合使用。

Bash的例子:

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

通过在sed命令中添加-i选项，这些文件将被就地修改。为了测试的目的，使用上面的命令不带-i选项。

输入:

<!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>

输出:

<!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>

我认为最简单的解决方案是创建一个$baseUrl变量。

PHP:

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

在HTML中你可以这样做:

<!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>

或者在JavaScript中你可以这样做:

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

相关内容

最新更新

热门标签：