JavaScriptには、文字列内の特定の文字列を別の文字列に置換するための「replace」メソッドがあります。
このメソッドを使用すると、文字列内のすべての出現箇所を置換することができます。
この記事では、JavaScriptのreplaceメソッドを使用して文字列を置換する方法について説明します。
- replaceの使い方
- replaceを使うときの注意点
- splitとjoinを使った置換方法
replaceとは？
「replace」は文字列を置換を別の文字列に置き換えることができるメソッドです。
JavaScriptでは文字を扱うことが多いので、文字の変更や整形をすることが多くあります。
また、正規表現を利用することでより高度な文字列の置換をすることができます。
日付やユーザーネームなどが置換対象になることが多いですが、日付はdateメソッドを使ってフォーマットするほうが、簡単なケースがあるので割愛します。
今回は、ユーザー名「Tanaka_Tarou」というユーザー名の「 _ 」（アンダースコア）を空白に「Tanaka Tarou」と表示されるように出力したいです。
const name = 'Tanaka_Tarou' // => Tanaka Tarou 出力したいでは、どうやって置換をすればいいのでしょうか。
さっそく、使い方を見ていきましょう！
「replace」を使う方法
まずは、replaceメソッドの引数について見ていきましょう。
replace('変更対象の文字列', '変更後の文字列')
replace('World', 'JavaScript') // この場合、WorldがJavaScriptに置換される上記の例では、「Hello」という文字列が「JavaScript」という文字に置換されます。
では、先程のユーザー名の主力はどうなるでしょうか。
「 _ 」を半角スペースに置き換えて上げればいいので記述方法は下記のようになります。
const name = 'Tanaka_Tarou'
name.replace('_', ' ')上記の書き方でも、今回は出力したいように表示することができますが「 _ 」が2つあった場合最初のアンダースコアしか空白に変更されません。
2つ以上の置換を行いたい場合は、正規表現を使いましょう！
正規表現を使った文字列の置換
アンダースコアの正規表現は「 /\_ 」となります。ただこれだけでは1つ目のアンダースコアしか変更されません。末尾に繰り返しマッチするものを探す「/g」を追加してください。
そうすることで文字列に含まれる「 _ 」をすべて置換することができます。
const name = 'Tanaka_middle_Tarou'
name.replace(/\\_/g, ' ')
console.log(name)
> Tanaka middle Tarou修飾子一覧
| /i | 大文字と小文字を区別しない |
| /o | 式の展開を一度だけ行う |
| /x | パターンの空白やCommentを無視 |
| /m | 対象の文字列を複数行として扱う |
| /g | 繰り返し |
| /e | 置換を行った結果を式として処理 |
文字列の中身をすべて置換する方法
その他の使用方法も見ていきましょう。
「みかん」の文字列を「バナナ」
const fruit = 'みかん'
fruit.replace('みかん', 'バナナ')
console.log(fruit)
> バナナ「replace」の使用事例と注意点
replaceが使われる場面としては、文字列の空白を削除することや改行コードを置換、日付の整形などに使われることが多いです。
文字列の空白を削除する方法
考えられるケースとしては、お問い合わせや会員登録の際にフォームへの入力したものに対して不要な空白が入っていることがあります。
この時、不要な空白を削除してデータを扱うほうがいいので、「replace」を使い空白をすべて削除します。
では、実装方法を見ていきましょう。
このような文字列があったします。
const text = '親譲り の 無 鉄 砲 で 小 供の時か ら損ば かり し て いる。'上記の文字列から、空白行をすべて取り除きたい場合は先程説明を行った正規表現を使って空白をすべて置換します。
const replaceText = text.replace(/\\s+/g, '')
console.log(replaceText)
> 親譲りの無鉄砲で小供の時から損ばかりしている。空白を全て取り除くことができましたね！
「join」「split」を使って置換をしましょう。
replaceだけでは、思ったとおりに文字列の置換ができない場合があります。
そのときに、join(), split()関数を使うことで同じように、文字列の置換をすることが可能です。
使い方を見ていきましょう。
- どの文字で分割するかを確認
- splitを使って文字列を分割し、配列へ格納
- joinを使って分割された配列を結合する
複雑のようにも思えますが１つずつゆっくり考えていけば難しくないので、1つ1つ考えていきましょう。
分割する文字の確認
const name = 'Tanaka_Tarou'「 _ 」で区切り⇒ Tanaka Tarouと表示したい
splitを使って文字列を分割し、配列へ格納
const _result = name.split('_')
console.log(_result)出力結果
['Tanaka', 'Tarou']joinを使って分割された配列を結合する
const result = _result.join(' ')
console.log(result)出力結果
Tanaka Tarou「replace」を使用したときよりも少しコードは長くなってしまうので、
どうしても、「replace」だけでは対応できないときに使ってみてください！
まとめ
replaceを使った、置換について紹介してきました。
JavaScriptで「置換」を行う方法は1つだけに限られたものではないので、その場にあった方法で置換をしていきましょう。
- replace()は文字の置換を行うことができる関数
- join(), split()を使うことでもどうようのことができる
- 複数文字を置換したい場合は、正規表現をうまく活用する
このことを頭に入れておくことで思った通りの操作ができるようになります。
今回のポイントをおさえて、一人で置換の操作ができるようになりましょう！
コメント