☰

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

관련 정보