2022年04月27日

5.[JS] 文字列操作

文字列操作には、正規表現を利用する物と、利用できない物(一般)があります。

1.文字列操作のメソッド

関数 何ができるか(抜粋)
.indexOf()

インデックス・オブ

文字列をサーチして、指定された文字列があるかを判定します。
.length 

レングス

文字列の文字数をカウントします。
.slice()

スライス

文字列の指定した位置から [文字列] を取り出します。
parseInt()

パース・インテジャ

.toString()

ツー・ストリング

[整数値]を[文字列]に変換します。

 

2.文字列操作(正規表現)を使うメソッド

正規表現で指定する場合は下記の理解が必須です。

1.正規表現とは

正規表現とは、指定したい文字列をパターンで表記する方法です。

 

2.PHPの正規表現との違い

JavaScriptの正規表表現はPHPとは、少し異なります。

PHP JavaScript
形式 '/正規表現/' /正規表現/
繰り返し 関数によって繰り返し回数が決まります。

 

条件の一致があると一回で終了します。

繰り返えす場合は下記を利用します。

/正規表現/g

 

3.最低限覚えたい正規表現

対象文字列 正規表現とポイント
itemという文字列

/文字列/の形式で指定します

/item/
item又はphpという文字列 |で複数を指定します

/item|php/
改行文字

改行はデバイスによってコードが異なる

・Windows:CR+LF

・Unix:LF

・Mac:CR

/[\r\n]+/g

定義された正規表現は下記になります

・CRは\r

・LFは\n

上記の両方を含む場合は[✖✖]+という表現を利用します。

g は1個見つけて終わりでなく総てを見つける時に指定します。

空白文字
/[\s]+/g

半角スペース、タブ(\f)、CR(\r)、LF(\n)、改ページ(\f)で、且つ、CR+LFも対象とする。

g は1個見つけて終わりでなく総てを見つける時に指定します。

全角スペースも含めた空白文字

/[\s ]+/g

全角スペースには定義文字が無いので、そのまま入れます

g は1個見つけて終わりでなく総てを見つける時に指定します。

文字列から数値を取り出す

(RGB数値等)

rgb(123,0,256)から、数値を取り出します。

/[\d]+/g

\dは、数値

+ で、複数文字の数値を指定

g は1個見つけて終わりでなく総てを見つける時に指定します。

クラス名、ID名で使えない文字と取り出す

/[ -,.\/:-@\[-^`{-~]/g

クラス名やID名に使える文字は

①半角英数字とハイフン (-)とアンダースコア (_)

②U+0080以上の文字(すなわち2バイト文字は総て利用可)

というルールがあります。

上記は、1バイト文字の中で使えない記号を指定しています。

✖✖ - 〇〇は、範囲指定です。

上記の構文チェックは UTF-8の文字コード表 を参考にしてください。

g は1個見つけて終わりでなく総てを見つける時に指定します。

電話番号をチェックする

/^0\d{1,2}-\d{3,4}-\d{4}$/

電話番号は、先頭(^)は0(1桁又は2桁の数字)-(3桁又は4桁の数字)-(4桁の数字)末尾($)がルールです。

〇 03-123-1234

〇 089-1234-1234

✖ 06-123-123 (3番目の数字が3桁なのでNGです)

尚、0120及び0800の電話番号は検知できません。

Gmailアドレスのチェックする

/^[a-z\d][a-z\d.]{4,28}[a-z\d]@gmail.com$/

Gmailで使える文字は「英数字」と「.」です。

先頭文字は(英数字^[a-z\d])

末尾文字列は(英数字@gmail.com$)

指定できる文字数は6~30文字です。

よって残りのの文字は「英数字」と「.」で{4,28}文字の範囲です。

[a-z\d.]{4,28}

Email全般のチェック

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

RFC準拠ではない一般的に紹介されている物です。

\wは、アルファベット、アンダーバー、数字です。

利用できる文字や制限が緩くて、これを認めているメールプロバイダは見たことがありません。

 

関数 何ができるか(抜粋)
.match()

マッチ

文字列を[正規表現]または[文字列]でサーチし、マッチしたデータを[配列]で取り出します。また判定にも利用できます。
.replace()

リプレース

文字列を[正規表現]または[文字列]でサーチし、指定文字に[置換]します。
.split()

スプリット

文字列を[正規表現]または[文字列]で分割し、[配列]にします。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()