記事一覧

JavaScriptでtrimしてみる




目次



trimについて

ハロー、みなさん。エジソンです。

ソフトウェア業界に身を置く読者の方なら、プログラムにおけるtrim(トリム)については、もはや語るまでもなく既知の事柄であることは間違いないでしょう。

trimという英単語について日本語に訳してみると、どのような意味になるかご存知でしょうか。「刈り込んで整える・手入れする・刈り取る」といった意味合いがあるようです。

プログラミング用語としてのtrimを説明すると以下のようになります。刈り込むというイメージそのままの内容なので、エンジニアではない方にも合点が行くのではないかと思います。

ある文字列の両端(左端または右端の何れかの場合もあり)からある特定の連続する文字を取り除くこと。

例えば、ある文字列に対して空白文字をtrimした場合には、以下のようになります。

" Hello World " → "Hello World"

JavaScriptで空白文字をtrimする

JavaScriptでtrimする場合に、何の関数を利用すれば良いかご存知でしょうか。実は、JavaScriptにおけるtrim関数はIE8においてはサポートされていませんでした。

そのため、trim関数がサポートされていないブラウザのことも考えて、Stringクラスに対してtrim関数の追加を試みるのがベターなようです。

trim関数の定義コード
if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

上記のコードについて説明すると、Stringクラスにtrimが存在しない場合は、trim関数を定義するというものです。

String.replace関数の部分が重要で、本関数の第一引数に正規表現パターンを与えて、空白文字を取り除くような処理になっています。正規表現について詳しく説明すると…

/^\s+|\s+$/g

^は行頭という意味で、¥sは空白文字です。+は直前の文字の一回以上の繰り返しを意味します。文章にすると、行頭の一回以上連続する空白文字となります。

|は又はという意味です。

$は行末という意味で、¥sは空白文字です。+は直前の文字の一回以上の繰り返しを意味します。文章にすると、行末の一回以上連続する空白文字となります。

まとめると、行頭の一回以上連続する空白文字と行末の一回以上連続する空白文字に一致する文字パターンという正規表現になるわけですね。

このパターンを第一引数として渡して、第二引数にブランクを渡すことで、空白文字を取り除いている訳です。

JavaScriptで半角空白と全角空白文字をtrimする

半角の空白文字のtrimの仕組みを覚えたところで、全角空白文字も含んでいるtrimにも挑戦してみましょう。

ソース
if(!String.prototype.trimHalfAndFull) {
  String.prototype.trimHalfAndFull = function () {
    return this.replace(/^[\s| ]+|[\s| ]+$/g,'');
  };
}

// 使い方
console.log("  Hello   World  ".trimHalfAndFull("0"));

結果
Hello   World

JavaScriptで任意の文字をtrimする

任意の文字をパラメータに渡すことのできる、trim関数も実装してみましょう。

ソース
if(!String.prototype.trimAny) {
  String.prototype.trimAny = function (any) {
    return this.replace(new RegExp("^" + any + "+|" + any + "+$", "g"),'');
  };
}

// 使い方
console.log("000Hello 101 World000".trimAny("0"));

結果
Hello 101 World

JavaScriptで任意の複数文字をtrimする

任意の複数文字を配列としてパラメータに渡すことのできる、trim関数も実装してみましょう。

ソース
// 定義
if(!String.prototype.trimAnyValues) {
  String.prototype.trimAnyValues = function (any) {
    var anyValues = any.join("|");
    return this.replace(new RegExp("^[" + anyValues + "]+|[" + anyValues + "]+$", "g"),'');
  };
}

// 使い方
console.log("10Hello 101 World10".trimAnyValues(["0", "1"]));

結果
Hello 101 World

まとめ

このように、trimにも色々なパターンがあるということが分かります。基本的には、正規表現で全てが対応できるので、正規表現の原理と、replace関数の使い方を覚えておくと良いかと思います。


関連記事

このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント

プロフィール

EZOLABブログへようこそ。
EZOLABは、札幌のソフトウェア会社です。

http://ezolab.co.jp