今回は、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
//greenreplaceAll()関数を使う
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パターンです。
一回で複数箇所文字列置き換えしたい時は、汎用性の高い正規表現での指定をしていきましょう。
