ITコラム

colmun_main7713

JavaScript

2017.11.14

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

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

目次

 
1.trim メソッドとは
2.空白と行終端記号の文字一覧
3.replace メソッドと正規表現で空白削除
4.左トリム
5.右トリム

1.trim メソッドとは

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

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

文字列 .trim( );

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

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

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

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


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

“  東京都千代田区霞が関1-2-3  霞が関ビル  ”
 
 

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

▲目次へ戻る

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

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

空白

\t タブ
\v 垂直タブ
\f フォーム フィード
  スペース

 
行終端記号

\b バックスペース
\n ライン フィード (改行)
\r キャリッジ リターン
\” 二重引用符 (“)
\’ 単一引用符 (‘)
\\ 円記号 (\)

▲目次へ戻る

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+/,””) )

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

“ 東京都千代田区霞が関1-2-3  霞が関ビル  ”
 
 

▲目次へ戻る

5.右トリム

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

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

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

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

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

“ 東京都千代田区霞が関1-2-3  霞が関ビル  ”
 
 

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.