☰

使用ShellScript从html文件中获取所有css样式、链接、js和脚本

tag-icon • tag-icon shell-script awk sed html
使用ShellScript从html文件中获取所有css样式、链接、js和脚本

我想获取<script>data 中的所有 JS 标签以及<script src="path/to/js"></script>or <script src="http(s)://example.com/to.js"></script>。<style>和<link href="path/to/css">或相同<link src="http(s)://example.com/to.js">

在这里，我可以运行不同的命令来获取脚本块、脚本链接，以及相同的样式和链接。

我在下面尝试过，可以获取script标签详细信息以及脚本链接。

sed -n 's/.*\(<script>.*<\/script>\).*/\1/p' path/to/file.html

但这里它将从标签的开头返回<script>到 的结尾</script>，如果 之间存在任何其他上下文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Document</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/basscss/8.1.0/css/basscss.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <style>
    html, body {
      background: grey;
    }
  </style>
  <link rel="stylesheet" href="assets/css/1.css">
</head>
<body>
  
  <a href="https://google.com">Hi</a>

  <link href="assets/css/2.css" rel="stylesheet">
  <script>
    var a = "Hello I'm inclined!";
    console.log(a);
    console.log("jQuery version: ", $.fn.version);
  </script>
  <script src="assets/js/1.js"></script>
  <script src="assets/js/2.js"></script>
</body>
</html>

sed当 HTML 为时，我的脚本命令得到了以下结果缩小化的，并得到没有什么当 HTML 是未缩小

<script>var a="Hello I'm inclined!"; console.log(a); console.log("jQuery version: ", $.fn.version); </script> <script src="assets/js/1.js"></script> <script src="assets/js/2.js"></script>

<style></style>与和类似<link ... rel="stylesheet">

为此，我发现下面的命令只会返回<link ... />标签中的 CSS 链接：

sed -n 's/.*href="\([^"]*\).*/\1/p' path/to/file.html

它返回下面的输出，其中由于与我使用的正则表达式的匹配情况，也存在anchor( <a ...></a>)标记。href

结果来自非缩小版本。

https://cdnjs.cloudflare.com/ajax/libs/basscss/8.1.0/css/basscss.css assets/css/1.css https://google.com assets/css/2.css

对于缩小版，它仅返回最后一个。

assets/css/2.css

我对结果的期望如下（对于非缩小版本）：

脚本

<script src="https://code.jquery.com/jquery-3.6.0.js"></script><script>
    var a = "Hello I'm inclined!";
    console.log(a);
    console.log("jQuery version: ", $.fn.version);
</script>
<script src="assets/js/1.js"></script>
<script src="assets/js/2.js"></script>

风格

<style>
    html, body {
      background: grey;
    }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/basscss/8.1.0/css/basscss.css" rel="stylesheet"/>
<link href="assets/css/1.css" rel="stylesheet"/>
<link href="assets/css/2.css" rel="stylesheet"/>

看看我的样品这里

编辑自这里

任何其他解决方案将受到高度赞赏。 （例如 - awk、Python 或任何其他）

答案1

如果您拥有 XML 感知工具并获得显示如何使用它们的答案，那么有关使用 XML 感知工具的所有建议通常都是好的，否则，如果您的输入是 XML 的子集（就像您在问题中所示），那么这可能足以满足您的需求，并且>不会出现在您的任何链接中。

使用 GNU awk 处理多字符RS、RT和\>字边界：

$ awk -v tag='script' 'BEGIN{RS="</?"tag"\\>"} !(NR%2){print "<"tag $0 RT">"}' file
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
    var a = "Hello I'm inclined!";
    console.log(a);
    console.log("jQuery version: ", $.fn.version);
  </script>
<script src="assets/js/1.js"></script>
<script src="assets/js/2.js"></script>


$ awk -v tag='style' 'BEGIN{RS="</?"tag"\\>"} !(NR%2){print "<"tag $0 RT">"}' file
<style>
    html, body {
      background: grey;
    }
  </style>


$ awk -v tag='link' 'BEGIN{RS="<"tag"\\>[^>]*>"} RT{print RT}' file
<link href="https://cdnjs.cloudflare.com/ajax/libs/basscss/8.1.0/css/basscss.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/1.css">
<link href="assets/css/2.css" rel="stylesheet">

相关内容