文字列をフォーマティングする簡易プラグイン

今回はjQueryで文字列を操作する簡易的なプラグインを作ります。仕様は、以下のようなものです。

  • 文字数が制限内に収まっているかを判定出来る
  • 文字数が制限を超過した場合、オプションで切り取ることが出来る
  • 文字列にホワイトスペース(スペースや空白)がある場合、オプションで取り除くことが出来る

文字数が制限内に収まっているか否かを判定するbool値とフォーマティング後の文字列を同時に取得可能にするために、戻り値はそれぞれの値を格納したobjectとします。

では、まずはHTMLの方から見ていきましょう。

入力フォームとチェックボタン、確認用のコンソールを二つ置いただけの簡単なものを用意します。続いて、jQueryを見ていきます。

文字列をフォーマテッングするjQuery簡易プラグイン

今回はjQueryで文字列を操作する簡易的なプラグインを作ります。仕様は、以下のようなものです。

  • 文字列が制限字数内に収まっているかを判定出来る
  • 文字列が制限字数を超過した場合、オプションで切り取ることを選択出来る
  • 文字列にホワイトスペース(スペースや空白)がある場合、オプションで取り除くことを選択出来る

では、まずはHTMLの方から見ていきましょう。

入力フォームとチェックボタン、確認用のコンソールを二つ置いただけの簡単なものを用意します。このときの実現は以下のようになります。コンソールはクリックされるまでは何も表示されません。

スクリーンショット 2015-10-19 12.29.03

続いて、jQueryを見ていきます。文字列が制限字数内に収まっているか否かのbool値とフォーマティング後の文字列の2つの値を同時に取得したいので、戻り値は各値を格納したobject(result)としています。

さて、今回作成したプラグインのコアは、$.myUtils.text={ }の内部に書かれているformatTextというメソッドです。このメソッドを呼び出し、文字列を判定、及び成形することになります。まず、1つ目の引数で文字列(text) を、次に、2つ目の引数で制限字数(max) を、そして、最後のパラメタでオプションを受け取ります。オプションは2種類、即ち、「制限字数超過の場合に超過部分を切り捨てるか否かのパラメタ」(truncate) と「ホワイトスペースを除外するか否かのパラメタ」(trim) です。前者はbool値であり、trueとした場合に超過部分は切り捨てられます。一方、後者は”none” 、”all” 、”both” 、”start” 、”end” の5種類の値を指定出来、また、それぞれの値に応じて、ホワイトスペースを除外する方法が異なります。各値の意味は、次の通りです。

  • “none” ホワイトスペースを削除しません(デフォルト値)
  • “all” 文字列中にある全てのホワイトスペースを削除します
  • “both” 文字列の先頭と末尾のホワイトスペースを削除します
  • “start” 文字列の先頭のホワイトスペースを削除します
  • “end” 文字列の末尾のホワイトスペースを削除します

オプションのtrimの指定が省略された場合、及び、上記以外の値(適当な文字列等)が指定された場合はホワイトスペースは削除されません。

メソッド内部でホワイトスペースの処理を正規表現を用いて実装しています。そして、続く処理では、文字列の長さが制限字数内か否かを判定します。注意すべきは、この順序が逆になってしまうと、最初に受け取った文字列が制限字数を超過している場合にresultのvalidは成形前の文字列を元にfalseと算出されてしまう点です。これが問題なのは、後にホワイトスペースが削除され、文字数が制限内に収まったとしてもfalseのままで値が返されてしまうからです。これでは、form送信時など、成形された文字列が有効か否かを判別をする際に使えなくなってしまいます。それゆえ、「ホワイトスペースの削除」→「制限字数判定」という順番としています。

最後にtruncateパラメタがtureの場合に文字列の超過部分を切り捨てております。ホワイトスペースが取り除かれてもなお、文字数が制限を超過する場合、truncateをtrueにすれば、収まる範囲だけ文字列をクリップしてくれるわけです。文字数が制限を超過しても、そのままフォームの送信をさせる場合などは、truncateをtureにし、戻り値のtextをそのまま送信することになるでしょう。一方、送信せずに文字数超過の警告を出す場合は、truncate指定せず(あるいはfalseとし)、戻り値のvalidがfalseの場合に処理を加えることになります。

では、実際の呼び出し側の処理を見ていきます。

チェックボタンが押されたら、2つのconsoleにそれぞれ、validとtextの値を表示します。ここでは引数にtextとmaxの2つだけを指定し、オプションは省略しています。また、制限字数は10字にしておきます。さて、結果は以下のようになりました。

スクリーンショット 2015-10-19 12.31.29

0〜aまでの11個の文字を入力し、チェックボタンを押した様子です。このとき、formatTextで得られたtextの値(コンソールの値)はそのまま11個の文字となっているのが分かると思います(truncateをデフォルト値=”none”として処理しているためです)。そして、文字数は制限字数を超過しているので、falseとなります。

次に入力フォームにホワイトスペースを入れた場合を確認してみましょう。

スクリーンショット 2015-10-19 12.45.48

全角のスペースを5つ入力し、その後ろに全角で1〜5の文字、計10個の文字を入力しています。オプションのtrimが指定されていないので、文字列先頭に入力したホワイトスペースは削除されずそのまま出力されているのが分かると思います。文字数は10字なので、validはtrueとなります。では、次にオプションパラメタを追加した場合を見てみましょう。

truncateをtrueとし、trimには”all”を指定しています。結果は次のようになります。

スクリーンショット 2015-10-19 12.56.38

先程と同様に全角のスペースを先頭に5つ入力しています。しかし、trimが指定されているため、先頭のスペースが取り除かれているのが分かると思います。次に、入力字数を超過させてみましょう。

スクリーンショット 2015-10-19 13.09.01

入力字数は、ホワイトスペースが5字と数字が10字、計15字ですが、結果字数はホワイトスペースが削除され、10字に収まっております。それゆえ、validの値はtrueとなります。更に超過させた場合は以下のようになります。

スクリーンショット 2015-10-19 13.09.23

先程の文字列に、「あいうえお」の5字を追加しており、入力字数は20字となります。そこで、まず、ホワイトスペースが削除され、15字となります。しかし、今度は時点で、限度(max)の10を超過しております。そして、truncateにtrueが指定されているため、10字を超える部分(「あいうえお」の部分)は切り捨てられることになります。最後にホワイトスペースを1つ置きに挿入した場合を見てみましょう。

スクリーンショット 2015-10-19 13.25.13

各文字の間、及び、最初と最後にスペースを入力しております。この場合、入力字数は、5つの文字と間に設けられた4つのスペース、そして左右の2つのスペースで、計11字となります。trimの値は”all”が指定されているので、6つのホワイトスペース全てが削除され、字数は5字となり、validはtrueとなります。なお、テキストからスペースが削除されているのを分かり易くするために、ここでは文字を選択して表示しています。

他にも、trimパラメタの値を”both”や”start”にして、用途に応じ文字列をフォーマテッングすることが出来ます。フォーム送信時のバリデーションなどには使い易いと思います。