皆さんこんにちは、最近絵本で中国語の勉強を始めたYOKOTAです。
皆さんはJavaScriptにおける文字列の削除をどうやってますか？
JavaScriptの文字列の削除の方法は実はやり方はたくさんあり、普段置換で使用されるreplace()メソッドでも削除が可能です。今回の記事ではJavaScriptの文字列の削除方法について焦点を合わせてYOKOTAが記事にいたしました。是非参考にしてください。
目次
JavaScriptにおけるslice()の文字列の削除方法
JavaScriptではslice()メソッドを使用して、文字列を削除することができます。
下記のコードのサンプルを見ていただけますか。
See the Pen
slice()で文字列の削除 by codepen1 (@codepen112233)
on CodePen.
文字列”あいうえおか”はJavaScriptでは012345のindexが当てられています。
slice()メソッドは文字列の最初のIndexと終わりのIndexを引数で指定することで、その範囲内の文字列以外を削除できます。
下記、slice()メソッドの基本構造です。
|
1 |
slice(初めのIndex#, 終わりのIndex#) |
文字列”あいうえおか”の”あ”以外を全部消すときは初めのindex#を0、終わりのindex#を1としてやれば”あ”以外全部削除できます。
”いう”以外を全部消すときは初めのindex#を1、終わりのindex#を3としてやれば”いう”以外全部削除できます。
つまり、指定範囲から外すことで文字列を削除することができます。
|
1 2 |
let name= 'あいうえおか'; let result = name.slice(1, 3); |
文字列nameに含まれる文字数はname.lengthとして出せるので、下記のように書き換えることもできます。
|
1 2 |
let name= 'あいうえおか'; let result = name.slice(name.length -5, name.length -3); |
JavaScriptのreplace()を用いた文字列の削除方法
replace()メソッドを使用することで文字列を削除することができます。
replace()メソッドは第一引数に対象となる文字列を入れ、第二引数に入れ替える文字列を入れてやれば、文字列を変換（置換）できる機能があります。そこで、第二引数に空文字(“”)を入れれば、指定の文字列を空文字に変換、つまり削除できます。
|
1 |
replace(削除したい文字列,""); |
では下記のコードを実際に動かしてみてください。
See the Pen
replace()で文字列を削除 by codepen1 (@codepen112233)
on CodePen.
上記コードでは文字列”あいうえおか”の”か”と空文字””を入れ替えることで”か”を削除しております。
JavaScriptの正規表現を使ってreplace()で文字列を削除するには？
replace()メソッドは正規表現を合わせて使用できます。
正規表現については、下記の記事で詳しく紹介しておりますので参考にしていただけますか。
JavaScriptの正規表現とは？一から分かりやすく説明します
簡単なのから始めましょう。
正規表現のグローバルリサーチ(g)を使用して文字列を検索し、削除したい文字を片っ端から消していきましょう。
正規表現では//で文字列を囲んで、gを/の後ろにオプションとして付けることで、文字列の中を全て検索し、変換できます。
|
1 |
文字列.replace(/消したい文字列/g, ''); |
では実際に動かしてみましょう。
See the Pen
replace()と正規表現（//g）で文字列を削除 by codepen1 (@codepen112233)
on CodePen.
cript>
文字列”あかいかうかえかおか”の”か”を検索し削除しています。
もし正規表現を使わず、下記のように実行した場合はどうなるでしょうか。
|
1 2 3 |
let name= 'あかいかうかえおか'; let result = name.replace("か", ''); 結果=>あいかうかえかおか |
replace()メソッドで正規表現を使わず文字列を削除する場合、一番初めにヒットした文字しか削除されません。
JavaScriptの正規表現を使って対象の文字列以外を削除する場合は？
replace()メソッドで消したい文字を指定して消しておりましたが、特定の文字以外を削除する方法は以下の正規表現を使用すれば実現します。
|
1 2 3 4 |
正規表現 /[^ ]/g [ ]に囲まれた文字以外の全てを指定 |
下記サンプルコードです。
See the Pen
replace()と正規表現（[^xyz]）で文字列を削除2 by codepen1 (@codepen112233)
on CodePen.
“あいうえお”の途中にランダムな記号や数字を入れてみましたが、実行すると”あいうえお”以外全て削除されています。
JavaScriptにおけるその他の文字列削除方法とは？（trim,split,join）
ここではその他の文字列の削除方法を紹介します。
空白を削除できるtrim()メソッドとは？
trim()メソッドは文字列の中にある先頭と末尾の空白文字を削除できます。
See the Pen
trim()で空白を削除（先頭、末尾） by codepen1 (@codepen112233)
on CodePen.
末尾はわかりにくいですがドラッグして範囲してしてやれば末尾の空白も消されていることがわかりますよね。
ちなみに右の空白だけ消すことも、左の空白だけ消すことも可能です。
右の空白だけ消す場合
|
1 |
文字列.trimRight(); |
左の空白だけ消す場合
|
1 |
文字列.trimLeft(); |
なお、trim()では、先頭と末尾以外の空白は消すことができません。
文中の空文字も消したい場合はやはりreplace()を使用する必要があります。
|
1 2 |
let name= ' あ い う え お か '; let result = name.replace(/\s+/g, ''); |
正規表現では\sは空白を表し、+を後に付けることで、連続する1文字以上の空白文字を指定できます。
後は、/gで文字列全体を検索範囲に入れて、””と入れ替えて文字列が削除されるようにしています。
split()とjoin()を組み合わせて文字列を削除する方法
split()とjoinを組み合わせて文字列を削除する方法があります。
split()に文字列を引数として与えてやると、文字列を分割し、配列データとして格納できます。
See the Pen
split()とjoin()で文字列を削除 by codepen1 (@codepen112233)
on CodePen.
上記のサンプルでは、文字列” あ い う え お ”に対してsplit()で空白文字“ ”を引数として与えた結果、id:result1には” ”を”,”に変換された形で新たな配列として格納されます。
join()メソッドはsplit()メソッドとは逆に配列を受け取るとくっつけて一つの文字列を生成します。
引数にはjoin(“-“)とすれば、‐で連結された文字が出力されますが、join(“”)とすることで、要素同士を直接くっつけて出力できます。
つまり、下記のようにすることで、文字列から特定の言葉（空白文字等）を指定して、削除した形で文字列を出力できます。
|
1 |
split("消したい文字").join("") |
まとめ
今回はslice(),replace()やsplit()とjoin()の組み合わせ等を用いた文字列の削除方法について記事にしましたがいかがでしたでしょうか。
メソッドや文字列削除だけではなく、正規表現の勉強にもなったかと思います。
replaceなどは単なる置換機能だけではなく、引数に入れるものを変えると削除できるのは面白いですよね。
他にもためになる機能が見つかったら記事にしていくので今後ともよろしくお願いします！
