☰

ShellScriptを使用して、HTMLファイルからすべてのCSSスタイル、リンク、js、およびスクリプトをインポートします。

tag-icon • tag-icon shell-script awk sed html
ShellScriptを使用して、HTMLファイルからすべてのCSSスタイル、リンク、js、およびスクリプトをインポートします。

dataおよびまたは<script>からすべてのJSタグを取得したいと思います。そしてまたは同じ<script src="path/to/js"></script><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>

sedHTMLが次の場合、スクリプトコマンドで次の結果が得られました。減らす、そして得る何もない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

<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のサブセットである場合（質問に示すように）、これで十分です。>あなたのリンクには表示されません。

RS複数の文字と単語の境界をRT処理するには、GNU awkを使用してください。\>

$ 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">

おすすめ記事