用html+js写了一个typecho模板资源路径替换的玩意

买菜也讲价 · 帖子由 **买菜也讲价** » 2023年 7月 14日 11:13

前言：自己写主题模板的时候，是先写在了本地，是html文件

再替换上typecho的时候，就很多路径要替换，懒得手动替换了。。

替换link标签的href路径
例子：
<link rel="stylesheet" type="text/css" href="../assets/css/vendors/themify.css">
替换成：
<link rel="stylesheet" type="text/css" href="<?php echo $this->options->themeUrl('assets/css/vendors/themify.css'); ?>">

提供逻辑思路：
1、先找到link标签/
2、判断该link的href的链接是否为【../assets】开头（注意不包含【】），如果是，则进行替换，
从上面的例子中可以看出，提取出原来link的href地址。去掉了【../】，并用<?php echo $this->options->themeUrl('删除../后的链接地址'); ?>包裹起来，然后替换。其它的不变。

js和图片路径同理。。

代码如下：

代码：全选

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>typecho模板资源路径替换</title>
</head>
<body>
    <textarea id="input" rows="5" cols="50"></textarea><br>
    <textarea id="output" rows="5" cols="50" readonly></textarea><br>
    <button onclick="replaceLink()">Submit</button>

    <script>
        function replaceLink() {
            var inputText = document.getElementById("input").value;
            var outputText = inputText.replace(/<link(.*?)href="(.*?)\.\.\/assets(.*?)"/g, function(match, p1, p2, p3) {
                var newHref = "<?php echo $this->options->themeUrl('assets" + p3 + "'); ?>";
                return "<link" + p1 + "href=\"" + newHref + "\"";
            });

            outputText = outputText.replace(/<img(.*?)src="(.*?)\.\.\/assets(.*?)"/g, function(match, p1, p2, p3) {
                var newSrc = "<?php echo $this->options->themeUrl('assets" + p3 + "'); ?>";
                return "<img" + p1 + "src=\"" + newSrc + "\"";
            });

            outputText = outputText.replace(/<script(.*?)src="(.*?)\.\.\/assets(.*?)"/g, function(match, p1, p2, p3) {
                var newSrc = "<?php echo $this->options->themeUrl('assets" + p3 + "'); ?>";
                return "<script" + p1 + "src=\"" + newSrc + "\"";
            });

            document.getElementById("output").value = outputText;
        }
    </script>
</body>
</html>