LoginSignup
19
15

More than 5 years have passed since last update.

正規表現でHTMLを圧縮する方法(たった1行)

Last updated at Posted at 2017-02-26

HTMLの圧縮にはいくつも方法がありますが、正規表現を使えば、一行でできます。
(※元のHTMLがきれいにかかれている場合に限るかも)

先にコードを。

Javascriptでの方法

anything.js

 // 変数 html は事前に fs.readFileSync とかつかってファイルを読み込んでください
 html = html.replace(/ {2,}|\n/g, '');

npmやGulpなど、HTMLの圧縮はありますが、HTMLだけだったらシンプルに圧縮できますね。

汎用的なパターンに対応するものがほしければ、そうしたモジュールを取り込むので良いと思いますが、自分が知れている範囲の基本的なHTMLの書き方だけだったらこれで充分です。

正規表現の解説

普段、正規表現使わない方のために正規表現部分の解説をしますと、

/ {2,}|\n/g

分割して考えましょう。

  • /◯◯◯◯/g」 ・・・ この◯に一致する文字列を取得する
  • {2,}」 ・・・ 取得条件その1({,}は直前にある文字が何回連続するかの最小値と最大値)
  • \n」 ・・・ 取得条件その2(\nは改行を表す)
  • |」 ・・・ または

{2の前に半角スペースが入っています

.replaceはJavascriptの「置換」ですね、htmlはデータ。

まとめ

なんでもフレームワークだ、モジュールだと頼ってしまいがちですが、
広い意味で物事のアルゴリズムを捉えると、簡略化できます。
フレームワークやモジュールは時間短縮できますが、
代償として、パフォーマンスや可読性を失う場合もあります。

今回の場合は、HTMLの文法の中で削除すべきものを、

改行 or 2個以上続く半角スペース」と定義しただけです。

あたまでかんがえるってだいじ。

19
15
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
15