imgタグのsrc属性やaタグのhref属性などに書くパス名を本番環境ではサイトルート相対にしておく必要があったので、ちゃんと書き換えたかHTMLファイルを提出する前にチェックしたい。他にもimgタグのalt属性に書き忘れがないかなども。

こんな時、HTMLエディタ上でファイル内を検索しながらチェックするのが面倒だったので、HTMLファイルからタグの属性と設定値をリストに出力するコマンドlist-attrをnode.jsで作りました。

使い方

以下の例で、入力のサンプルに使ったindex.htmlは記事の最後にあります。

imgタグのsrc属性やalt属性をリストする

コマンドにオプションを指定しない場合は、imgタグのsrc属性とalt属性を抽出します。

list-attr index.html

list-attrコマンドからの出力は属性が１行につき１個ずつ表示されますので、grepコマンドに通して行を絞り込むと見やすいです。
出力例1で、行頭の数字はHTMLファイル中の行番号です。行21と29はサイトルート相対パスへの書き換え忘れ、さらに行21はテスト環境のファイルを指したままのようです。

出力例1

$ list-attr index.html | grep src
20    src: /site/img/photo1.jpg
21    src: ../my-folder/photo2.jpg
29    src: site/img/photo3_large

出力例2で、行20のalt属性が空になっていることがわかります。また、行21は仮のテキストが残っている、行29は画像差し替え時にaltのテキストを変更し忘れていたのかもしれません。

出力例2

$ list-attr index.html | grep alt
20    alt: 
21    alt: あとで書く
29    alt: 古い内容

-nオプションを指定すると、alt属性が空になっているimgタグのみ出力します。

出力例3

$ list-attr -n index.html 
20 <img> [1/3]
20    src: /site/img/photo1.jpg
20    alt:

aタグやlinkタグのhref属性をリストする

list-attr -t a index.html
list-attr -t link index.html

出力例4

$ list-attr -t a index.html | grep href
23    href: http://localhost/test.html
24    href: /site/link.html

hrefやsrc属性のパス名がサイトルート相対でないタグを抽出する

--not-root-pathオプションを指定します。

出力例5

$ list-attr -t img --not-root-path index.html | grep src
21    src: ../my-folder/photo2.jpg
29    src: site/img/photo3_large
$ list-attr -t a --not-root-path index.html | grep href
23    href: http://localhost/test.html
$ list-attr -t script --not-root-path index.html | grep src
31    src: js/app.js

imgタグのwidth, height属性をリストする

list-attrコマンドがデフォルトで抽出する属性に加えて、任意の属性を抽出対象に追加するには、-aオプションの後に属性名をカンマで区切って指定します。

list-attr -t img -a width,height index.html

出力をgrepコマンドに通す場合、-Cオプションを指定して前後の行も表示させると見やすくなります。

出力例6

$ list-attr -t img -a width,height index.html | grep -C1 width
20    src: /site/img/photo1.jpg
20    width: 1200
20    height: 720
--
--
29    src: site/img/photo3_large
29    width: 1920
29    height: 1080

metaタグのOGP画像の設定情報をリストする

list-attrコマンドの出力に対し、grepコマンドの-Aオプションを指定してcontent行も表示させます。

出力例7

$ list-attr -t meta -a property index.html |grep -A1 og:
10    property: og:url
10    content: https://localhost/test.html
--
11    property: og:title
11    content: あとで書く
--
12    property: og:type
12    content: article
--
13    property: og:site_name
13    content: テスト用サイト
--
14    property: og:description
14    content: あとで書く
--
15    property: og:image
15    content: https://localhost/test.jpg

list-attrコマンドに渡すHTMLファイルは１個ずつ、抽出対象のタグも１個ずつしか指定できませんが、自分が日常使うにはこれで十分間に合ってます。

CSSファイル内に記述したパス名、たとえばbackground: url(test.jpg)などはこのコマンドではチェックできないので今後の課題。

サンプルのHTMLファイル

修正漏れ満載のindex.htmlはこちら

index.html

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>テキトーなページ</title>
  <meta name="description" content="あとで書く">
  <meta name="keywords" content="">
  <meta property="og:url" content="https://localhost/test.html">
  <meta property="og:title" content="あとで書く">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="テスト用サイト">
  <meta property="og:description" content="あとで書く">
  <meta property="og:image" content="https://localhost/test.jpg">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="stylesheet" href="../test/style.css">
</head>
<body>
  <div><img src="/site/img/photo1.jpg" width="1200" height="720" alt=""></div>
  <div><img src="../my-folder/photo2.jpg" alt="あとで書く"></div>
  <ul>
    <li><a href="http://localhost/test.html" target="_blank">Home</a></li>
    <li><a href="/site/link.html">About</a></li>
  </ul>
  <picture>
    <source srcset="/site_old/img/photo3_sp.jpg" media="(max-width: 767px)" width="800" height="600">
    <source srcset="img/photo3_tab.jpg" media="(max-width: 1024px)">
    <img src="site/img/photo3_large" width="1920" height="1080" alt="古い内容">
  </picture>
  <script src="js/app.js"></script>

</body>
</html>