【JavaScript入門】trimで前後の空白スペースを削除する方法

こんにちは!エンジニアの中沢です

JavaScriptには文字列の前後の空白を削除するための「trimメソッド」があります。代わりにreplaceメソッドを使えば空白以外の任意の文字を削除できるので、上手く活用してください。

この記事では、

  • trimとは
  • trimの使い方

という基本的な内容から

  • trimの代わりにreplaceメソッドと正規表現を使う方法
  • 空白以外の文字を削除する方法

などの応用的な使い方に関しても解説していきます。今回はこれらの方法を覚えるために、trimメソッドのさまざまな使い方をわかりやすく解説します!

目次

trimとは

そもそもtrimとは、JavaScriptのメソッド(関数)の一つで、削除したい対象文字列の前後の空白を削除する機能を持っています。また”空白”とは、スペースやタブ、改行などが対象となります。基本的な構文は以下の通りです。

"空白を除去したい文字列".trim()

trimの使い方

次にtrimメソッドの基本的な使い方を解説します。まずはtrimメソッドを使うときのサンプルコードを見てみましょう。

// 文字列の前後に空白が入っている
var address = " 東京都新宿区新宿1-1-1  ";
 
console.log(address.trim());

実行結果

東京都新宿区新宿1-1-1

「東京都新宿区新宿1-1-1」の前後にあった空白が除去されていることが確認できます。他にもタブや改行を削除するサンプルも併せて確認しておきましょう。

// タブ
var address = " 東京都新宿区新宿1-1-1       ";

// 改行
var question = "在庫があるか確認させてください。"
        + "2010年に出版された本です。"
        + "連絡手段はメールを希望します。";

console.log(address.trim());
console.log(question.trim());

実行結果

東京都新宿区新宿1-1-1
在庫があるか確認させてください。2010年に出版された本です。連絡手段はメールを希望します。

trimの代わりにreplaceメソッドと正規表現を使う方法

trimは実はブラウザ環境(IEやChrome、Firefoxなど)によって使えない場合があります。例えばInternet Explorer9未満のバージョンではtrimに対応していませんので、別の方法を採用する必要があります。

その別の方法とは、以下のように、replaceメソッドと正規表現を使う方法です。

str = “    東京都新宿区新宿1-1-1     “;
 
str = str.replace(/^s+|s+$/g,'');

正規表現を使うことで「先頭(^)に続く空白(s)」と「末尾($)の空白(s)」を空文字(”)で置換しています。「+」は直前の文字の1回以上の繰り返しを表します。正規表現やreplaceメソッドについて詳しく確認しておきたい方は以下の記事が参考になります。

空白以外の文字を削除する方法

ではここからは、削除対象の文字の種類を広げてtrimメソッドでは対応できない場合の代用方法を解説します。

全角の空白を削除する方法

削除したい文字列は半角だけでなく、全角の場合もあるかと思います。基本的に全角空白もtrimメソッドを使うことはできます。

var str = ”  東京都新宿区新宿1-1-1  ”; //前後に全角空白2つ

console.log(str.trim());

実行結果

東京都新宿区新宿1-1-1

「東京都新宿区新宿1-1-1」の先頭と末尾にあった全角空白が除去されているのが分かります。しかしながら、前述の通りブラウザによってはtrimメソッドの機能が制限され、半角空白のみを対象にしてるブラウザ環境があるので注意が必要です。

そこで、このような場合には「半角 / 全角」の空白除去に対応した正規表現を使うのが良いでしょう。

var str = ”  Hello , JavaScript   ”; //半角と全角の空白が入った文字列

console.log(str.replace(/^[s| ]+|[s| ]+$/g,'');

出力結果

Hello,JavaScript

文字列の先頭にある「半角・全角空白」と、末尾の「半角・全角空白」が置換されているのが分かります。正規表現内にある「|」は「または」を意味しており、上記サンプルの場合だと半角空白または全角空白を「|」でつないでいます。

任意の文字を削除する方法

空白文字だけでなく、任意の文字を削除する方法もご紹介します。これは文字列の先頭か末尾に特定の文字が付加されている場合、その文字をまとめて除去したいときに役立ちます。

以下、サンプルコードです。

function trimAnyChar(str, anyChar) {

    return str.replace(new RegExp("^" + anyChar + "+|" + anyChar + "+$", "g"),'');

};

この関数は、引数として「置換前の文字列(str)」、「trimしたい文字(anyChar)」の2つを受け取ります。メソッドの中ではreplaceメソッドと正規表現を使います。RegExpは文字列のパターンマッチングを行うときに使う「正規表現オブジェクト」です。

「先頭(^)にあるanyChar、または末尾($)にあるanyChar」というパターンを発見したらその任意の文字を削除しています。以下、使用例です。

console.log(trimAnyChar("111Hello, JavaScript111", "1"));

実行結果

Hello, JavaScript

先頭に続く「111」と末尾にある「111」を削除しています。このように、文字列の先頭か末尾に任意の文字がある場合に有効な手段として使えるので、ぜひ参考にしてみてください。

文字列の使い方総まとめ

文字列の様々な使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

まとめ

いかがでしたか?今回はtrimメソッドで空白を削除する方法を解説しました。trimメソッドは文字の間の空白や、全角スペースは削除しないので注意してくださいね。もしtrimメソッドの使い方を忘れてしまったらこの記事を確認してください!

この記事を書いた人

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
ntakeshi@sejuku.net

目次