あまり知られていないけれど、HTML5では正規表現が使えるようになる

2009年9月29日

正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlやPHP、JavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。

その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。

HTML5のどこに正規表現が使えるようになるの？

正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。

The pattern attribute specifies a regular expression against which the control's value is to be checked.

If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]

例として、入力された文字を、数字1文字と大文字のアルファベット3文字に制限するサンプルがワーキングドラフトに掲載されています。

<label> Part number:
  <input pattern="[0-9][A-Z]{3}" name="part"
   title="A part number is a digit followed by 
          three uppercase letters."/>
</label>

title属性に設定された文字列は、ツールチップ表示や正規表現に合致しない場合のアラートに使われるようです。

ご存じのようにinput要素はほとんどのWebサイトで使われています。そこで顧客番号やユーザーID、シリアル番号や当選番号など、何らかの入力フォーマットを設定することはそれほど珍しいことではないでしょう。

いままで入力されたデータのチェックは、サーバ側かJavaScriptによるプログラミングが必要でしたが、HTML5では正規表現を使うことでWebブラウザ側で簡単に（しかも柔軟に）チェックできるようになります。そしてその正規表現を考えるのはWebデザイナーやコーダーの仕事になるかもしれません。

そんなWebデザイナーやコーダ－の方々のために、そしてプログラマだけど正規表現は得意ではない、という方々のために、次の記事では正規表現をマスターするためのリソースを紹介します（記事：正規表現をいまのうちに覚えておきたい人のためのリソース集）

（追記：「サーバ側のチェックはいらなくなるの？」というコメントをいくつかいただきました。フォーマットのチェックはHTML5の正規表現でできるようになりますが、できることはそこまでです。サーバ側でのチェックが不必要になるわけではありません。例えばデータの内容のチェックなどはサーバ側でチェックが必要でしょう。言葉足らずでしたので、補足させていただきます）