JavaScript【trim】文字列の空白を削除

String オブジェクトのtrim メソッドは、文字列の中の空白を削除するメソッドです。
今回は、文字列の空白を削除する方法について紹介します。

1. trim メソッドとは

　
String オブジェクトのtrim メソッドは、文字列から先頭および末尾の空白と、行終端記号の文字を削除するメソッドです。
（行終端記号については、次章で一覧表示します。）

trim メソッドは、次のように使用します。

文字列 ．trim（ ）；

文字列は、trim メソッドでは変更されません。

削除される文字は、空白の他、タブ、フォーム フィード、キャリッジ リターン、ライン フィードが含まれます。
（ 次章で、空白と行終端記号の文字一覧を表示します。）

trim メソッドを使用して、文字列の中の空白を削除してみます。

var str = "　東京都千代田区霞が関1-2-3　　霞が関ビル　　";
str.trim();

「 str.trim(); 」を出力すると、次のように表示されます（ 上：str、下：str.trim() ）。

　
先頭と末尾の空白が削除されました。

▲目次へ戻る

2. 空白と行終端記号の文字一覧

　
空白と行終端記号の文字は、次のような種類があります。

【空白】

　
【行終端記号】

▲目次へ戻る

3. replace メソッドと正規表現で空白削除

　
trim メソッドは、文字列の先頭と末尾の空白を削除するメソッドですので、文字列の中間にある空白も削除したい場合は、replace メソッドを使用して、空白文字を空文字に置換する処理をします。

そして、空白は半角空白と全角空白がありますので、正規表現で置換すると漏れなく処理できます。

replace メソッドについては、以下のページもご参照下さい。
JavaScript【 replace 】1. 文字列の置換
JavaScript【 replace 】2. メタ文字を使用した置換
JavaScript【 replace 】3. 様々な置換方法

　
replace メソッドを使用して、文字列に含まれる空白を削除します。
次の入力欄に、空白入りの文字列を入力して、空白削除ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {

    var str = document.getElementById("txt").value;
    var str2 = str.replace(/\s+/g, "");
    document.getElementById("dat").value = str2;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <input type="text" id="txt" placeholder="空白入りの文字列を入力して下さい">
        <input type="button" value="空白削除" onClick="dispAry()">
　　
        <input type="text" id="dat" placeholder="空白削除後の文字列を表示します">
    </form>
</div>

　
「str.replace(/\s+/g, "");」で、置換対象を 正規表現「 /\s+/g 」で指定しています。

「 \s 」は 空白文字 を表しています。
さらに、「 + 」を付けることで、1文字以上連続するすべての空白文字を置換対象としています。

最後に記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現のパターンにマッチする全ての文字列を返します。

正規表現の記述については、正規表現をご参照下さい。

▲目次へ戻る

4. 左トリム

　
文字列の 先頭（ 左端 ）の空白のみを削除することもできます。

replace メソッドを次のように記述します。

var str = "　東京都千代田区霞が関1-2-3　　霞が関ビル　　";
str.replace(/^\s+/,"");

「str.replace(/^\s+/,"");」を出力すると、次のように表示されます。
（ 上：str、下：str.replace(/^\s+/,””) ）

出力された文字列を全て選択して、空白を確認してみて下さい。

▲目次へ戻る

5. 右トリム

　
文字列の 末尾（ 右端 ）の空白のみを削除することもできます。

replace メソッドを次のように記述します。

var str = "　東京都千代田区霞が関1-2-3　　霞が関ビル　　";
str.replace(/\s+$/,"");

「str.replace(/\s+$/,"");」を出力すると、次のように表示されます。
（ 上：str、下：str.replace(/\s+$/,””) ）

出力された文字列を全て選択して、空白を確認してみて下さい。

▲目次へ戻る