【jQuery】trim()を使って文字列の左右の空白や改行を削除!

文字列の左右の空白や改行を削除するにはtrim()を使用します。

trim()とは、文字列の先頭または末尾にある不要な空白などを削除するメソッドであり、jQueryオブジェクトの不要な空白やタブ、改行などを削除することができます。

その為、入力された文字には不要な空白やタブ、改行が含まれていることがある時に見やすい文字列を取得するようになります。

しかし、trim()メソッドはあくまで文字列の先頭または末尾にある不要な空白などを削除するメソッドになりますので、文字列の中にある空白などを削除することはできませんので注意してください。
その場合はそのまま文字列を返すようになります。

今回は、jQueryのtrim()を使って文字列の左右の空白や改行を削除する方法について以下の内容で解説していきます。

⚫︎ 文字列の先頭や末尾の空白等を削除する場合
⚫︎ 文字列中の空白等を削除する場合

ハルトさん

今回はjQueryのtrim()メソッドで文字列の左右の空白や改行を削除する方法について説明していきます。

さとみさん

はい!
お願いします!

trim()とは

trim()とは、文字列の左右の空白や改行を削除するメソッドとなります。

trim()の書き方

trim()メソッドの構文は下記となります。

パラメータ

⚫︎ 文字列:
空白やタブ、改行などを削除したい文字列を指定する

trim()メソッドのパラメータに文字列を指定して呼び出すと、指定した文字列の空白やタブ、改行などを削除することができます。

しかし、trim()メソッドは文字列の先頭と末尾の空白等を削除するだけなので、文字列内にある空白は削除されません。

文字列の左右の空白や改行を削除するサンプルコード

文字列の左右の空白や改行を削除するサンプルコードを紹介していきます。

文字列の先頭や末尾の空白等を削除する場合

スライドショーを自動再生で行う場合は、slickのパラメータのautoplayにtrueを指定します。

sample.html

style.css

index.js

実行結果

trim()メソッドによって、文字列の先頭や末尾の空白等を削除しています。

さとみさん

trim()メソッドで先頭や末尾の空白等を削除していますね!

ハルトさん

そうですね。
trim()メソッドのパラメータに文字列を指定することで、指定した文字列の先頭の末尾にある空白や改行、タブなどを削除しています。

文字列中の空白等を削除する場合

trim()メソッドで文字列中の空白等を削除することはできません。
文字列中の空白等が削除されないまま表示されます。

sample.html

style.css

index.js

実行結果

文字列中の空白等は削除されていません。
その為、コンソールには削除されない状態のまま表示されます。

さとみさん

trim()メソッドは文字列中の空白等は削除できないんですね!

ハルトさん

そうですね。
その為、trim()は文字列の空白等を削除できるメソッドだと認識しないようにしましょう。
あくまで、文字列の先頭と末尾の空白やタブ、改行を削除するメソッドとなります。

今回のポイント

trim()で文字列の先頭や末尾の空白や改行を削除

⚫︎ 文字列の先頭や末尾の空白や改行を削除するにはjQueryのtrim()メソッドを使用する

⚫︎ trim()メソッドのパラメータには、先頭や末尾の空白や改行を削除したい文字列を指定する

⚫︎ 文字列の中に空白やタブ、改行がある場合にtrim()メソッドを使用するとそのままの文字列を返すようになる
(trim()は先頭や末尾の空白やタブ、改行を削除するメソッドである為)

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し