デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.trim( )前後の空白を削除

構文

前後の空白を削除返値:文字列
jQuery.trim( 文字列 )ver1.4.3〜

機能

jQuery.trimメソッドは引数に設定した文字列の前後にある空白(タブや改行も含む)を削除します。途中にある空白は削除しません。IE以外のブラウザでは日本語などの2バイト文字にも対応しており、全角スペースも削除することができます(IEで利用できないので実質はNGでしょう)。

解説

前後の空白を削除します

サンプル(trim/01.html)を開いてbody内にbutton要素とpre要素が2つあることを確認して下さい。2つのpre要素にはid属性で「ori」と「trim」と設定してあります。

<pre id="ori"></pre>
<pre id="trim"></pre>

jQueryでは、まず以下の部分を確認して下さい。変数oriStrには前後に半角スペースのある文字列が代入されています。2行目では変数trimStrにはjQuery.trimメソッドを利用してoriStrから前後のスペースを削除したものを代入しています。

var oriStr = "         lots of spaces before and after         ";
var trimStr = $.trim(oriStr);

続いて以下の部分を確認して下さい。buttonをクリックするとhtmlメソッドを利用してid属性がoriのpre要素に変数oriStrの内容を、id属性がtrimのpre要素に変数trimStrの内容を表示します。

$("button").click(function(){
	$("pre#ori").html("original = '" + oriStr + "'");
	$("pre#trim").html("trimed = '" + trimStr + "'");
});

結果として、buttonをクリックすると上段にはオリジナルのスペースが削除されていない文字列が表示され、下段にはjQueru.trimメソッドによって前後のスペースが削除された文字列が表示されます。

改行やタブも削除します

まずは$.trimメソッドを利用していないサンプルを紹介します。サンプル(trim/02.html)を開いてbody内のpre要素が1つに減っていることを確認して下さい。id名は「test」に変更されています。

<button>click</button>
<pre id="test"></pre>

続いてjQueryを確認して下さい。ポイントは1行目に設定した変数myTextです。赤字で記したように、前にはTABコード、後には改行コードをいれてあります。buttonをクリックするとtrim/01.htmlと同じようにpre要素内に表示します。

var myText = "\t\t\t\t前にはタブ、後には改行があります\n\n\n\n\n\n";			
$("button").click(function(){
	$("pre#test").html(myText);
});

実際にbuttonをクリックして表示内容を確認して下さい。前にタブがあるため、左図のように左端から離れたところから文字がはじまります。またpre要素にはcss設定で背景色をオレンジ色にしているのですが、改行があるため複数行にわたりオレンジ色の領域があります。では$.trimメソッドを利用したサンプルを確認します。サンプル(trim/02b.html)を開いて以下の様に変数myTextに$.trimメソッドを利用しています。

var myText = "\t\t\t\t前にはタブ、後には改行があります\n\n\n\n\n\n";
var myText = $.trim(myText);

buttonをクリックすると、前にあったタブが削除され文字が左端からはじまることが確認できます。また、後にあった改行コードも削除されたのでオレンジの領域が1行だけになりました。ちなみに半角スペース/タブ/改行など、文字が表示されない記号をホワイトスペースと呼びます。 →IT用語辞典e-words様:「ホワイトスペース

全角スペースも削除します(現状IEは対応してません)

ブラウザによっては全角スペースも削除することができます。サンプル(trim/03.html)を開いて、ほとんどtrim/01.htmlと同じ事を確認して下さい。異なるのは以下のように、oriStrの内容が全角に変更されている点だけです。

var oriStr = "   全角 の スペースも OK  ";
var trimStr = $.trim(oriStr);

結果として、buttonをクリックすると「IE以外のブラウザ」では下段に全角スペースを削除した文字列が表示されます。

メモ

本来は表示用ではなく内部処理用です

サンプルではdiv要素ではなくpre要素を利用しました。htmlでは最初から「半角スペースは無視される仕様」のためdiv要素だと半角が削除されたのが確認できないためです。サンプル(trim/test01.html)ではpre要素の代わりにdiv要素を利用していますが、oriStrの表示からも半角が削除されてしまうのが確認できます。

<div id="ori"></div>
<div id="trim"></div>

このようにhtmlでは、もともと半角スペースが削除される(全角は削除されません)のでjQuery.trimメソッドは表示用ではなく、サーバーにデータを送る際に意図しない改行やスペースが含まれるのを防ぐため等にあるのでしょう