記事の内容
この記事では、JavaScript言語でよく使うreplaceと置換について説明します。
JavaScriptのコードは、ES6で書いています。
replaceの使い方
replaceは、対象の文字列を置換する関数です。
ただし、動作に少しクセがあります。
replaceでは、最初にマッチしたものしか置換されません。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // replace( 対象の文字, 置換する文字 ); | |
| // replaceでは、最初にマッチしたものしか置換されません | |
| let str = 'apple,banana,orange' | |
| let replaced = str.replace(',', ' ') | |
| console.log(replaced) | |
| // apple banana,orange |
by replaceの基本的な使い方
replaceでは、正規表現を使うと上手く動作します。
「/,/g」で、全ての「,」に一致します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // replace( 対象の文字, 置換する文字 ); | |
| var str = 'apple,banana,orange' | |
| var replaced = str.replace(/,/g, ' ') | |
| console.log(replaced) | |
| // apple banana orange | |
| var str = 'apple,banana,orange' | |
| var replaced = str.replace(/,/g, '-') | |
| console.log(replaced) | |
| // apple-banana-orange | |
| var str = 'apple,banana,orange' | |
| var replaced = str.replace(/,/g, '_') | |
| console.log(replaced) | |
| // apple_banana_orange |
replaceの様々な活用事例
様々な使い方
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 「\s」は空白もじを意味します | |
| var str = 'あ いう え お かき く け こ' | |
| var new_str = str.replace(/\s/g, '') | |
| console.log(new_str) | |
| // あいうえおかきくけこ | |
| // \dは数字を意味します | |
| var str = 'あ1い2う3え4お3' | |
| var new_str = str.replace(/\d/g, '') | |
| console.log(new_str) | |
| // あいうえお | |
| // 「|」で、どちらか一方に合致した場合に削除します | |
| var str = 'あ1 い2う3 え4お3 ' | |
| var new_str = str.replace(/\s|\d/g, '') | |
| console.log(new_str) | |
| // あいうえお | |
| // \nを<br />に変換 | |
| var str = 'あ\nいう\n\nえお' | |
| var new_str = str.replace(/\n/g, '<br />') | |
| console.log(new_str) | |
| // あ<br />いう<br /><br />えお |
関数を指定
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // replaceの第2引数には、関数を入れることもできます | |
| // 3桁の数字に区切って、プラス1をしています | |
| let plus_1 = function(value) { | |
| return Number(value) + 1 | |
| } | |
| var numbers = '100,200,300' | |
| var new_numbers = numbers.replace(/\d{3}/g, plus_1) | |
| console.log(new_numbers) | |
| // 101,201,301 | |
| var numbers = '111,222,333' | |
| var new_numbers = numbers.replace(/\d/g, plus_1) | |
| console.log(new_numbers) | |
| // 222,333,444 |
split、join、filterを組み合わせる
ちなみに、このように書くこともできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // replace( 対象の文字, 置換する文字 ); | |
| let str = 'apple,banana,orange' | |
| let replaced = str.split(',').join(' ') | |
| console.log(replaced) | |
| // apple banana orange | |
| // もっと複雑なこともできます | |
| // 「,」を空白に変更 | |
| // 100より大きい数字を抽出 | |
| // ソート | |
| // 反転させる | |
| // 空白で接続する | |
| let numbers = '99,100,201,101,9999,2,5,6' | |
| var new_data = numbers.split(',') | |
| .filter(val => Number(val) > 100) | |
| .sort() | |
| .reverse() | |
| .join(' ') | |
| console.log(new_data); | |
| // 9999 201 101 |
まとめ
この記事では、JavaScriptのreplaceと置換について説明しました。
replaceを使いこなるには、正規表現に強くなるといいかもしれません。
Good luck for your engineer life!
