【JavaScript】replaceを使った文字列の置換

TOP
コラム
【JavaScript】replac

はじめに

JavaScriptとは一体何なのか。というところから、JavaScriptのメリット・デメリット含めて解説いたします。また、JavaScriptの「文字列」と「置換」を可能にする「replace関数」についてもIT初心者向けに分かりやすく簡単に解説いたします。作業効率をアップさせることができますのでぜひ一緒にマスターしましょう。

JavaScriptとは

1995年に登場したプログラミング言語の一つです。JavaScriptはクライアントサイドの言語として開発されました。JavaScriptが使えるようになると、Ajaxというページを更新しなくても画像が切り替わることができたり、入力中に検索候補が出てきたり、様々な動きのあるWebページを作ることができます。その他に、ポップアップウィンドウの表示や、カウントダウンタイマー作成などサイトの利便性の向上が可能になります。クライアントサイド(PC・スマホ)でもサーバサイド(インターネットの接続先のサーバー)でも動かすことができます。

JavaScriptのメリットとデメリット

メリット

１．Web開発に強いこと。JavaScriptはフロントエンドとバックエンドのどちらでも開発可能です。

２．環境構築が不要であること。Javaのデメリットとして、環境の準備が大変であることを挙げましたが、JavaScriptは初心者がつまづきやすい環境構築が不要です。

３．強力なフレームワーク沢山あること。具体的には、JQueryやReactといったフレームワークです。現在でもフレームワークの開発が進んでいて、これらを活用することで開発効率を大幅に向上させることができます。

デメリット

１．処理速度が他の言語より遅いこと。コンパイルが不要なため、実行時にプログラムの解析→解釈→変換という工程が必要になるため、時間がかかり処理速度が遅い傾向にあります。

２．ブラウザによって挙動が異なること。JavaScriptはブラウザ上で動作する言語であるため、ブラウザの種類やバージョンによって挙動が異なります。それぞれの環境でテストを行う必要があるので、通常の開発テストよりも工数がかかってしまいます。

JavaScriptのことがよく理解できたところで、文字列の置換について解説していきます。

replaceとは

「replace（リプレイス）」とは、置き換える・取り替えるという意味があります。プログラムを作成していると、文字列の中にある文字を、別の文字に置き換えたい場面があるのではないでしょうか。そんな時に便利なのが、replace関数になります。replace関数は、文字列の中にある指定した文字を、別の文字に置換することができるメソッドです。正規表現という置換ルールを使うことで、様々なパターンの置換処理も可能です。

replaceの書き方

基本的な関数の書き方は以下のようになります。

置換対象を含む文字列．replace(置換対象の文字列, 置換後の文字列)；

まずは基本的なreplaceの使い方として、「_」を「–」に置換する方法は次のとおりです。

var str=文字列；
str.replace(置換対象の文字列,置換後の文字列)；
↓
var str = ′name_123′；
result = str．replace( ′_′，′–′ )；

結果は　″name–123″　となります。

また次のような文字列の置換方法もあります。

var tagetstr="I like animals．"；
var restr="like"；
var repstr="hate"；
var result；
result = tagetstr．replace(restr，repstr)；

結果は"I hate animals．"となります。

正規表現を用いて置換する場合

var tagetstr="Cats is animals．There are many kind of cats"；
var restr=/cats/gi；     　 ／／複数を置換する場合"g" ,大文字と小文字の区別をしない場合"i"を指定
var repstr="dogs"；
var result；
result = tagetstr．replace( restr ， repstr )；

結果は、"dogs is animals．There are many kind of dogs"となります。

特殊文字の使用

1つ以上の′a′を見つけたり、スペースを見つけたりといった置換検索の場合は、特殊文字を使用します。特殊文字の「∗」は直前の文字の0回以上の文字列を意味しています。例えば、/ab∗c/ というパターンでは、1つの ′a′ とその後ろに続く0個以上の ′b′とそのすぐ後ろに続く ′c′からなる文字の組み合わせに一致します。"cbacabbbcb"という文字列ではこのパターンは ″abbbc″という部分文字列が抽出されます。

さいごに

本記事は、JavaScriptの「文字列」と「置換」について簡単に解説いたしましたが、いかがでしたでしょうか。最後に解説した特殊文字は十数個ありますので、ご興味がある方は、さらに詳しく調べてみてください。最後までお読みいただきありがとうございました。