あまり知られていないけれど、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の正規表現でできるようになりますが、できることはそこまでです。サーバ側でのチェックが不必要になるわけではありません。例えばデータの内容のチェックなどはサーバ側でチェックが必要でしょう。言葉足らずでしたので、補足させていただきます)

Tags: HTML/CSS Web技術 正規表現

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly




タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本