JavaScriptで指定位置の文字列を置換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで指定位置の文字列を置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

位置を指定せずに文字列を置換する方法

今回はJavaScriptで文字列を置換する方法について、みていきましょう。

この場合、replaceメソッドを使用して、任意の文字列中のある文字を任意の文字列に置き換えることが可能です。

文字列を完全に別のキーワードへ置換することもできます。

 

例えば、”こんにちは、私の名前は山田です。”という文字列の名前の部分を変更するには、以下のように記述しましょう。

var before = "こんにちは、私の名前は山田です。";
var after = before.replace('山田', '田中');
console.log(after);

実行結果は以下のように表示されます。

こんにちは、私の名前は田中です。

このようにして、特定の文字列を置換することが可能です。

 

sliceメソッドの使い方

sliceメソッドは、任意の位置の文字列を抽出することが可能です。

sliceメソッドの引数には、抽出する文字列の開始インデックスと終了インデックスを指定します。

抽出されるのは、開始インデックスの文字列から、終了インデックスの前の文字列までなので注意してください。

例えば以下のようにして文字列の2文字目から5文字目までを取得することができます。

var str = "あいうえおかきくけこ";
var ret = str.slice(1, 5);
console.log(ret);

実行結果は、以下になります。

いうえお

 

[PR] フロントエンドで副業する学習方法を動画で公開中

指定位置の文字列を置換する方法

指定した位置の文字列を置換するには、少し工夫が必要です。

また、指定した位置の文字列を置換するメソッドはJavaScriptには存在しないため、以下の手順で実現しましょう。

1. 指定位置の前までの文字列を取得する。
2. 指定位置の後ろの文字列を取得する。
3. 置き換えたい文字列の前に1．の文字列を、後ろに2．の文字列を挿入する。

この手順で指定位置に文字列を置換することが可能となります。

 

 

実際に書いてみよう

以下がプログラムコードとなります。

var str = "0123456789";
var begin = 3;
var replace_str = "あああ";
var end = replace_str.length;
var before = str.slice(0, begin - 1);
var after = str.slice(begin-1 + replace_str.length);
var ret = before + replace_str + after;

console.log(ret);

まず、置換したい文字列の長さを取得します。

それをもとに置換する文字列前までの文字と置換する文字列より後ろの文字を取得することが可能です。

置換する文字列前までの文字、置換する文字、置換する文字列より後ろの文字を連結します。

このように標準では用意されていない機能でもコードの組み合わせにより実現することができるでしょう。

 

まとめ

指定位置の文字列を置換する方法はいかがだったでしょうか。

作成した機能を繰り返し使う場合は自作メソッド化しておくと便利です。

プログラム１行１行が何をしようとしているのかを理解することが様々な機能に応用することが出来ます。

 

執筆してくれたメンター

黒木一志（おおたかずき） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。