【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
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)

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

まとめ

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

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

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

まる。

Python歴5年のフルスタックエンジニア&ヨギー。
大学は心理学専攻、趣味はヘルスケア全般。

最近は自作脳波デバイスとそれを使ったインタラクティブアートのチューニングに勤しみ中。コラボ・お仕事のご依頼はDM又はメールにて。

↓アートとかの趣味アカ。よかったらみてね。٩(๑❛ᴗ❛๑)
Instagram:@malmal0v0

まる。をフォローする
その他の記事はこちら
[Touchdesigner]指数関数的に変数の値を加速させる方法
【格安StableDiffusion】画像生成AIサービスcomputerender.comの使い方を解説
[Touchdesigner]フルスクリーンウィンドウ(borderless view)を閉じるとフリーズ(Crash)する問題について
世界初!?個人で自作MRIを制作されてる八代さんを取材してきました。(技術とかマインドとか)
【3秒でととのう】麻布十番に1月OPENしたTARU SAUNA LABO(樽サウナラボ)を取材してきました

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