【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歴3年のフルスタックエンジニア&ヨギー。
大学は心理学、趣味はヘルスケア全般。

最近は自作脳波デバイスのチューニングに勤しみ中。
お仕事の依頼はDMもしくはメールにて。

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

まる。をフォローする
その他の記事はこちら
[TouchDesigner]OSC in DATにてUnable to bind port errorと表示される場合の解決法
【実録】症状は何日で治る?後遺症対策は可能??実際に新型コロナ(ステルスオミクロン)にかかったので自宅療養中に色々実践してみた【体験談】
副業初心者が気軽に稼ぐならココナラが最強!スキルなしでできる仕事を紹介
起業するための資金調達の方法7選【自己資金なしでも起業は可能】
OpenBCI GUIにてNetworking-Test-Kitでプロトコルの値がうまく送受信できない問題の解決法

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