JavaScriptで文字列にこういう操作がしたい
- 両端の空白を削除(トリム)したい
- あらゆる空白を全て削除したい
- 1つ以上の空白を1つの空白に置換
こういう空白の削除とか置換について
その方法とコード例をまとめてみました。
このページの目次
１．両端の空白だけを削除（トリム）する
文字列の両端に空白がある場合です。
両端の空白を削除するにはどうするのか…
答えは String.trim() を使えばいいだけです。
▼ MDN : String.trim() の解説
trim() メソッドは、文字列の両端の空白を削除します。このコンテクストでの空白には、空白文字（スペースやタブ、ノーブレークスペースなど）とすべての改行文字（LF や CR など）を含みます。
引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim
文字列両端から空白削除してくれるメソッド
全角空白を除くあらゆる空白を削除してくれます。
こういうケースに使うことが多いですね。
▼ String.trimメソッドを使ったコード例
|
1 2 3 4 5 6 7 8 9 |
function sayHello(name){ let msg = ` Hello ${name}!! `; msg = msg.trim(); /// <= 空白削除 return msg; }; console.log(sayHello('Pisuke')); |
▼ このコードの出力結果
|
1 |
Hello Pisuke!! |
上記では複数行文字列にテンプレートリテラルを使ってます。
▼ テンプレリテラルの詳細
それを使う場合、コード的な見栄えのために両端に空白・改行が入りがちですね。ちょうど例に挙げたコードみたいな感じです。
その削除に String.trim() が便利という話
２．先頭 or 末尾の空白だけ削除も可能
ちなみに片方の端だけ空白削除も可能
▼ 次のようなtrimメソッドもある
- String.trimStart : 左端の空白だけ削除
- String.trimEnd : 右端の空白だけ削除
▼ 使い方はString.trim()と同じ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const str1 = ` Hello!!`.trimStart(); const str2 = `Hello!! `.trimEnd(); console.log(str1); /// => 'Hello!!' console.log(str2); /// => 'Hello!!' |
左右の端から空白トリムできてます。
使用頻度は少ないけど役立つことがあります。
３．あらゆる空白文字/全角空白を全削除
今度は次のようなケースを想定。
- あらゆる空白文字を削除したい
- スペース・タブ・改行すべて
- それから全角空白も削除したい
そんな時はやっぱり正規表現が便利です。
▼ あらゆる空白文字を表す正規表現
|
1 2 |
/// 空白を表す正規表現 const regexp = /[\s\u{3000}]/ug; |
正規表現では空白を \s で表すのですが、そこに全角スペースは含まれません。だから \u[3000] によって全角も含めています。ちなみにこの正規表現は以下の記事でも使いました。参考 : jQueryで要素中身が空か判定する
それではこれを使って空白削除してみます。
▼ あらゆる空白削除のコード例
|
1 2 3 4 5 6 7 8 |
const msg = ` H e l l o `.replace(/[\s\u{3000}]/ug, '') console.log(msg) /// => Hello |
このコードの文字列部分は全角スペースも含んでます。
ドラッグすると全角スペースの場所が分かりやすいです。
４．複数行文字列の改行をすべて削除
文字列中の改行をすべて削除したい場合…
※ 半角スペース・タブは削除しない
それにも正規表現を使うのがベストです。
▼ 改行を表す正規表現
|
1 2 |
/// こんな正規表現 const regexp = /\r|\n/g; |
改行コードというのは厄介なもので、OSごとにコードが違います。Windowsだと \r\n だけど、Linuxだと \n みたいな感じで…
だから上記の正規表現になります。
これを使って改行をすべて削除してみます。
▼ こういうコードで試してみる
|
1 2 3 4 5 6 7 8 |
const msg = ` Hello world !!!!! `.replace(/\r|\n/g, ''); console.log(msg); /// => Hello world !!!!! |
どうせなら正規表現で「改行をあらわす表現」があれば便利だけど、そういった機能もないので愚直な感じにしました。
これでほぼ問題ないと思う
５．2つ以上の空白を1つの空白に置換
今度は削除じゃなくて置換について
- 2つ以上の空白があるなら、
- 1つの空白に置換する、
- その処理を文字列全体に適用する
こういうケースも正規表現を使うのが楽です。
▼ 例えばシンプルなコード例
|
1 2 3 4 5 6 7 8 9 10 |
const trimmed = ` 1 2 3 4 5 6 7 8 9 `.replace(/\s+/g, ' ').trim(); console.log(trimmed); /// => 1 2 3 4 5 6 7 8 9 |
正規表現で2つ以上⇒1つの空白に置換してるだけ
ここまでの空白削除・置換の方法まとめ
ということで紹介した方法の箇条書き
専用メソッド／正規表現を使えば簡単にできます。
以上、JSでの空白削除・置換でした。ではまた
