【Javascript】配列内の空白(全角/半角)、改行を全て削除する方法(サンプルコード付)

Javascript

2022/2/3 2022/2/2

今回は、Javascriptのリスト（配列）の中にある文字列要素のそれぞれから、空白（スペース）や改行といった余分な情報を削除する方法を紹介します。

大まかなやりかたは2パターン
- forEach文で要素を回して取り出し
- join()で一度文字列に結合した後、置き換えて再配列化
その他のシチュエーションでの解決方法
- HTML要素をtoArray()で配列化
- replaceAll()関数を使う
まとめ

大まかなやりかたは2パターン

forEach文で要素を回して取り出し

要素内の文字列を順に取り出し、一要素ずつ置き換えていく方法です。

改行を削除するサンプルコード：

let colors = ["red\n", "\nblue", "green\n"];

colors.forEach(function(element){
  let color = element.replace("\n","")
  console.log(color)
});
//red
//blue
//green
Code language: JavaScript (javascript)

空白を削除するサンプルコード：

let colors = ["red ", " blue", "green "];

colors.forEach(function(element){
  let color = element.replace(" ","")
  console.log(color)
});
//red
//blue
//green
Code language: JavaScript (javascript)

但し、このreplace()には弱点があります。
Javascriptのreplace()関数は、通常先頭の一文字しか置き換えてくれません。

その為、以下のように正規表現を使うことで一括置き換えが可能になります。

全ての改行を削除する方法

let colors = ["red\n\n", "\nblue", "\ngreen\n"];

colors.forEach(function(element){
  let color = element.replace(/\n/g,"")
  console.log(color)
});
//red
//blue
//green
Code language: JavaScript (javascript)

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

let colors = ["　red　　", "　　blue ", " g re en "];

colors.forEach(function(element){
  let color = element.replace(/\s+/g,"")
  console.log(color)
});
//red
//blue
//green
Code language: JavaScript (javascript)

正規表現にて\s+と記述することで、文書中の全角空白・半角空白を指定することができ、
gはグローバルマッチのフラグオプションで、全てのヒット項目に対して処理を行う指定になります。

正規表現は一度覚えてしまうと色々な場面でとても便利なので、積極的に練習して使いこなせるようになりましょう。

join()で一度文字列に結合した後、置き換えて再配列化

配列を一旦ひとつの文字列に変換し、一括で消去・書き換え後、再度配列に戻す方法です。

全ての改行を削除するサンプルコード

let colors = ["\nred\n", "\nblue", "g\nr\ne\ne\nn\n"];
colors.join("+").replace(/\n/g, "").split("+");
//["red","blue","green"]
Code language: JavaScript (javascript)

全ての全角＆半角空白を削除するサンプルコード

let colors = ["　red　　", "　　blue ", " g re en "];
colors.join("").replace(/\s+/g, "").split("");
//["red","blue","green"]
Code language: JavaScript (javascript)

join関数とreplace関数、split関数を一行で書いているので少なく見えますが、

・連結後
・置き換えて
・再配列化

と分けて書くと3行分の処理を行っています。

その他のシチュエーションでの解決方法

ほかにもJavascript ではに多様なシチュエーションでの別のやり方が存在します。
複数紹介するので、↑で解決できなければこちらを参考ください。

HTML要素をtoArray()で配列化

jQueryだと配列化の際に、toArray関数も使えます。

元々配列ではない複数のdiv要素を、forで回して置き換えています。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>r e d</div>
  <div>　blue</div>
  <div>　green　</div>
<script>
    function ins(color){
      var pull = [];
      for (var i = 0; i < color.length; i++) {
        var col = color[i].replace(/\n/g,"");
        pull.push(divs[i].innerHTML);
      }
    }
    ins( $("div").toArray().reverse() );
</script>
</body>
</html>
//red
//blue
//green
Code language: HTML, XML (xml)

replaceAll()関数を使う

ECMAScript2021よりStringオブジェクトにreplaceAllメソッドが追加され、最近純正は純正JavascriptでもreplaceAll()関数が使えるようになりました。

let colors = ["　red　　", "　　blue ", " g re en "];
colors.join("").replace(/\s+/g, "").toArray("");
//["red","blue","green"]
Code language: JavaScript (javascript)