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

初心者向けにJavaScriptで指定位置の文字列を置換する方法について現役エンジニアが解説しています。文字列の置き換えにはreplaceメソッドを使います。指定位置に対してはsliceメソッドで前後の文字列を取得してからつなげます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで指定位置の文字列を置換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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

今回は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・jQueryで挫折しない学習方法を動画で公開中

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

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

また、指定した位置の文字列を置換するメソッドは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);

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

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

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

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

 

まとめ

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

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

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

 

執筆してくれたメンター

黒木一志(おおたかずき)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。

現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。

みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

JavaScriptで指定位置の文字列を置換する方法が、よく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

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