JavaScriptで指定位置の文字列を置換する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで指定位置の文字列を置換する方法について現役エンジニアが解説しています。文字列の置き換えにはreplaceメソッドを使います。指定位置に対してはsliceメソッドで前後の文字列を取得してからつなげます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
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);
実行結果は、以下になります。
いうえお
指定位置の文字列を置換する方法
指定した位置の文字列を置換するには、少し工夫が必要です。
また、指定した位置の文字列を置換するメソッドはJavaScriptには存在しないため、以下の手順で実現しましょう。
- 指定位置の前までの文字列を取得する。
- 指定位置の後ろの文字列を取得する。
- 置き換えたい文字列の前に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);
まず、置換したい文字列の長さを取得します。
それをもとに置換する文字列前までの文字と置換する文字列より後ろの文字を取得することが可能です。
置換する文字列前までの文字、置換する文字、置換する文字列より後ろの文字を連結します。
このように標準では用意されていない機能でもコードの組み合わせにより実現することができるでしょう。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
指定位置の文字列を置換する方法はいかがだったでしょうか。
作成した機能を繰り返し使う場合は自作メソッド化しておくと便利です。
プログラム1行1行が何をしようとしているのかを理解することが様々な機能に応用することが出来ます。
執筆してくれたメンター
黒木一志(おおたかずき)
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。 |

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

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

分かりました。ありがとうございます!
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)