JSで文字列の中の任意の位置に別の文字を挿入する【sliceメソッド】

投稿日:2024年09月04日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

JSで文字列の中の任意の位置に別の文字を挿入するには？

ハイフンなしの郵便番号のデータを表示させる際にJavaScriptでハイフンを差し込みたいという状況があったので、その時調べたJavaScriptで文字列の中の任意の位置に別の文字を挿入する方法を備忘録としてまとめます。

下図のように、ユーザーが入力したハイフンなしで入力した郵便番号の数列の中の適した位置に自動的に「-」（ハイフン）を挿入します。

JavaScriptに文字列の中の任意の位置に別の文字を挿入する専用のメソッドはないので、slice()メソッドを利用して実現させます。

slice()メソッドについて

JavaScriptのslice()は特定の文字列の任意の位置から任意の文字数分を切り出すメソッドです。

下記のように引数に「切り出し開始位置」と「切り出す文字数」を指定します。

このslice()を使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。

sliceを使った実装例

下の例では、郵便番号の形式をイメージして元の文字列の3文字目と4文字目の間にハイフンを挿入しています。

JavaScript

var text = "1234567";
var first = text.slice(0,3);
var second = text.slice(3);
var inserted_text = first + "-" + second;
console.log(inserted_text);//結果:123-4567

1行目挿入を行いたい文字列です。

2行目slice()で文字列の1文字目から3文字目までを切り出します。なお、slice()で文字の位置を指定するときは先頭の文字を0番目として数えていきます。第二引数は文字の個数をそのまま指定します。

3行目同じくslice()で文字列の4文字目（先頭を0から数えるので「3」）から最後の文字までを切り出します。第二引数を省略すると最後の文字まで切り出されます。

4行目ここまでで、「first」が「123」、「second」が「4567」になっているので、間に「-」（ハイフン）を入れて再度組み合わせれば完了です。

今回は一ヵ所に挿入したので文字列を二分割しましたが、二ケ所以上に挿入したければその分文字列を分割すればOKです。

まとめ

以上が、JavaScriptのslice()を使って文字列の中の任意の位置に別の文字を挿入する方法です。

今回の文字列の中への文字の挿入以外にも、テキストの抜粋などslice()は使い道の多い便利なメソッドに感じます。