もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第11回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(3)

この記事を読むのに必要な時間:およそ 13 分

前回に引き続き正規表現

前回JavaScriptで行うバリデーション(フォームの入力項目の正当性チェック)の例をご紹介しました。主に正規表現を使うための説明をしたのですが,内容の理解については大丈夫でしょうか?

正規表現の利用については,多くの人が悩む部分だと思います。この正規表現の利用は,JavaScriptだけでなく,他のプログラムでも使われたりしますし,また,Dreamweaverやその他各種テキストエディターなどでも,正規表現を使っての検索ができるようになっていますので,それらを使っての練習もしてみてはいかがでしょうか?

今回も前回に引き続き,JavaScriptで行うバリデーションを実装例を紹介しますが,その前に,今回は少しだけ,正規表現をエディタで行う練習をしてみましょう。

Dreamweaverで正規表現の練習

本日の実践例を紹介する前に,Dreamweaverを使って,正規表現を使っての検索例をご紹介いたします。

Dreamweaverを使い作業をされている方が多いと思うのですが,Dreamweaverには,正規表現での検索ができるようになっています。ここで正規表現を使うということはあまり無いのかもしれないですが,知っていると便利な場面も多々あります。

例えば,imgでsrc="○○.jpg"となっている部分だけを検索したいような時があったとします。正規表現を使わない検索を使わない場合は,⁠.jpg」の拡張子で検索したり,⁠src="○○」と,部分的に抜き出して検索するなんてことをすると思います。しかし,拡張子だけの検索だと,例えばアンカータグ(aタグ)のhref属性にも「.jpg」へのリンクをつけてしまっているような場合は,それすらも検索でひっかかってしまいます。また「src="」で検索した場合は,該当の箇所以外のsrc属性もひっかかってくる事態にもなります。

正規表現を使うと,それらの余計な部分が検索時にひっかからないようにすることができます。

src属性で「.jpg」のものを検索

今回のように,src属性の中でも「.jpg」になっている部分だけを検索するには,下記のように指定をします。

src属性の「○○.jpg」となっている部分だけ検索

src=".+\.jpg"

Dreamweaverのコードを正規表現で検索する例

Dreamweaverのコードを正規表現で検索する例

Dreamweaverのコードを正規表現で検索する例(コード上)

Dreamweaverのコードを正規表現で検索する例(コード上)

Dreamweaverのコードを正規表現で検索する例を分解

パターン(赤文字部分)説明
src="src="の文字
.+半角ドットが任意の1文字,プラスが直前の文字が1文字以上,それが組み合わされて,任意の1つ以上の文字
\.半角ドット1文字 (半角ドットはメタ文字のためエスケープが必要)
jpg"jpg"の文字

これで,src属性の中から「.jpg」だけを検索できます。今回はわかりやすいようにsrc属性全体(src="")を対象にできるようにしたのですが,下記のようにしても同様に検索することが可能です。

src属性の「○○.jpg」となっているタグだけ検索 その2

src.+\.jpg

イコール(=)とダブルクォーテーション("")を含めていないだけですが,これでも検索が可能です。

また,今回は任意の1文字を対象に「.+」を利用したのですが,今回の例であれば「.*」でも同様の結果を得ることができます。

覚えておくと便利な正規表現検索

先ほどの例の他にも,覚えておくと便利な正規表現の検索はいくつもあります。しかし,たくさん覚えておくというのも難しいので,ものすごく簡単な例だけをいくつかあげておきます。

改行を含む検索

Dreamweaverであれば,正規表現を使わずとも,任意の改行を含む文字列を検索してくれますが,正規表現でそれを行う場合は前回もご紹介した,定義済み文字クラスを利用します。

改行を含む任意の文字列を検索

○○○○\n○○○○

○○部分は任意の文字例です。○○が決まっていいる場合は,正規表現を使っていなくとも検索することは可能ですが,例えば「決まった文字列+改行+何か文字・・」というような場合は,正規表現を使う方が便利なので,これは覚えておくと便利です。

Dreamweaverのコードを正規表現で検索する例

Dreamweaverのコードを正規表現で検索する例

タブを含む検索

これも前回ご紹介済みですが,タブを含む検索も楽にできます。

タブを含む検索

\t

これだけでタブを検索することができます。個人的には,タブが連続しているような場合の箇所を無くしたりタブ1つ分にしたいなどの時に「\t\t」「\t\t+」などで検索置換などをしています。

Dreamweaverのコードを正規表現で検索する例

Dreamweaverのコードを正規表現で検索する例

改行の無いPタグ全体

最後にもう一つ。一つのPタグを,1行分全体を検索したいような場合,下記のようにしてみます。

改行の無いPタグ全体

<p>.+</p>

改行の無いPタグ全体

改行の無いPタグ全体

上記のような場合,属性値が含まれていたり,開始タグから終了タグの間で改行があるような場合は検索対象にはならないのですが,それらが無い場合に検索でひっかかってきます。

また,もう一点注意として,Pタグが改行なしに連続している場合も,複数含まれて該当してしまいます。該当箇所の最初から最後までが引っかかってしまうためのことです。この点だけは注意して覚えておいてください。

今回はDreamweaverのコード上での正規表現の練習例をいくつかご紹介しましたが,他のテキストエディタでも,正規表現検索がある場合は同様のことができます。

しかし,高度な検索例の場合や長くて改行もたくさん含むような検索をする場合は,エディタの結果と実際のブラウザで表示させた時の結果が違ってくる場合も多々あるります。エディタでの練習は,あくまで正規表現の基本的な事だけにしておき,実際のブラウザでのチェックについては,過去のもご紹介してきた,Firebugを使っての方法が一番いいです。

テキストエディタで練習をしたとしても,次のステップではFirebugなどのコンソールを使って練習するようにしてください。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入