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

javascript programming coding

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

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

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

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

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

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

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

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

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

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

但し、この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

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

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

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

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

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

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

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

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

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

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

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

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

replaceAll()関数を使う

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

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

但しこちらはWebブラウザベースの仮想環境など、環境によっては使えないことも有る為注意が必要です。

まとめ

いかがでしたでしょうか。

一度一つの文字列に結合するやり方と、配列のままforeachで一要素ずつ回し取り出しながらreplaceをかけるやり方の大まかに2パターンです。

一回で複数箇所文字列置き換えしたい時は、汎用性の高い正規表現での指定をしていきましょう。

まる。

━━━━━━━━━━━━━━━━━
■未経験OK!大学生インターン募集中!
プログラミングやITなど
興味ある方ご連絡ください‎。
(๑ > ﻌ <`)و✧
━━━━━━━━━━━━━━━━━
Python歴5年のフルスタックエンジニア&ヨギー。
大学は心理学専攻、趣味はヘルスケア全般。
最近は自作脳波デバイスの設計とそれを使ったインタラクティブアート生成に勤しみ中。

↓アートとか日常。
Instagram:@malmal0v0

お仕事のご依頼はDM又はメールにて。

まる。をフォローする
その他の記事はこちら
【最新版】DMM WEBCAMP徹底比較!就業両立・専門技術・短期集中コースのどれがおすすめ?タイプ別に解説
世界初!?はんだ用卓上リフロー炉で「リフローたこ焼き」は調理できるのか
【エンジニアのキャリアを伸ばす】tech boostの持つ、2つのコースとは?特徴やメリットを解説!【未経験からフリーランスになろう】
【ネタバレ】2024年しろたん新春福袋を購入したので中身を紹介します!【限定品は?総額いくら?】
[Touchdesigner]CHOPの波形グラフをオーバーレイ(重ねて表示)する方法

タイトルとURLをコピーしました