• HOME > 
  • JavaScript > 
  • JSで文字列の中の任意の位置に別の文字を挿入する【slice...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

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

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

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

JSで文字列の中の任意の位置に別の文字を挿入するイメージ

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

slice()メソッドについて

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

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

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()は使い道の多い便利なメソッドに感じます。

広告
広告

関連する記事

サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]