
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
JavaScript
2017.11.14
String オブジェクトのtrim メソッドは、文字列の中の空白を削除するメソッドです。
今回は、文字列の空白を削除する方法について紹介します。
1.trim メソッドとは
2.空白と行終端記号の文字一覧
3.replace メソッドと正規表現で空白削除
4.左トリム
5.右トリム
String オブジェクトのtrim メソッドは、文字列から先頭および末尾の空白と、行終端記号の文字を削除するメソッドです。
(行終端記号については、次章で一覧表示します。)
trim メソッドは、次のように使用します。
文字列 .trim( );
文字列は、trim メソッドでは変更されません。
削除される文字は、空白の他、タブ、フォーム フィード、キャリッジ リターン、ライン フィードが含まれます。
( 次章で、空白と行終端記号の文字一覧を表示します。)
trim メソッドを使用して、文字列の中の空白を削除してみます。
var str = " 東京都千代田区霞が関1-2-3 霞が関ビル "; str.trim();
「 str.trim(); 」を出力すると、次のように表示されます( 上:str、下:str.trim() )。
先頭と末尾の空白が削除されました。
空白と行終端記号の文字は、次のような種類があります。
空白
\t タブ \v 垂直タブ \f フォーム フィード スペース
行終端記号
\b バックスペース \n ライン フィード (改行) \r キャリッジ リターン \” 二重引用符 (“) \’ 単一引用符 (‘) \\ 円記号 (\)
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 」は グローバルサーチという正規表現フラグで、指定した正規表現のパターンにマッチする全ての文字列を返します。
正規表現の記述については、正規表現をご参照下さい。
文字列の 先頭( 左端 )の空白のみを削除することもできます。
replace メソッドを次のように記述します。
var str = " 東京都千代田区霞が関1-2-3 霞が関ビル "; str.replace(/^\s+/,"");
「 str.replace(/^\s+/,””); 」を出力すると、次のように表示されます。
( 上:str、下:str.replace(/^\s+/,””) )
出力された文字列を全て選択して、空白を確認してみて下さい。
文字列の 末尾( 右端 )の空白のみを削除することもできます。
replace メソッドを次のように記述します。
var str = " 東京都千代田区霞が関1-2-3 霞が関ビル "; str.replace(/\s+$/,"");
「 str.replace(/\s+$/,””); 」を出力すると、次のように表示されます。
( 上:str、下:str.replace(/\s+$/,””) )
出力された文字列を全て選択して、空白を確認してみて下さい。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.