ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」とは「Node.js」とは「Ajax」とは「chart.js」とは「Javascript」の使い方「Javascript」の「エラーチェック」をする方法「Javascript」の「変数」「Javascript」の「配列(Array)」「Javascript」の「DOM(Document Object Model)」の「使い方」「Javascript」の「関数 / Function」「Javascript」の「条件分岐・繰り返し」「Javascript」の「イベントハンドラー(Event Handler)」「Javascript」の「文字」を操作する方法「Javascript」の「文字」を検索する方法「Javascript」の「スコープ」「Javascript」の「ファイル操作方法」「Javascript」の「画像操作方法」「Javascript」の「情報」を出力・チェックする方法「Javascript」での「ヒアドキュメント」の使い方「Javascript」の「Built-in Object(ビルトインオブジェクト)」「Javascript」の「ライブラリー / Library」
Reference
数字
「Javascript」で「計算」に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法





【Javascript】文字の検索方法

【Javascript】
文字の検索方法




「Javascript」の正規表現は、
「RegExp」オブジェクトが用意されていますが、
メソッドに直接「正規表現」が記述できるため、
あまり利用されていないらしい。






「Javascript]の文字検索ができるメソッド


「Javascript」で、文字列検索ができるメソッドは、
検索するメソッド説明
indexOf 文字列の先頭(0番目)から1文字ずつ検索をして、最初に一致した位置(index番号)を数値で返すメソッド。
大文字・小文字を区別してくれる。
配列にも対応。返り値は、配列要素のインデックス番号。
lastIndexOf 文字列の後ろ(0番目)から1文字ずつ検索をして、最初に一致した位置(index番号)を数値で返すメソッド。
大文字・小文字を区別してくれる。
配列にも対応。返り値は、配列要素のインデックス番号。
search 「検索したい文字列」「正規表現」での検索が可能なメソッド。
検索結果は先頭からの位置を「数値」で返す。
見つからない場合は、「-1」を返す。
配列にも対応。返り値は、配列要素のインデックス番号。
match 「正規表現」でのみ検索できるメソッド。
「g」フラグを付けると、一致した内容を「配列データ」で返してくれる。
test検索方法


Back



「Javascript]での正規表現の書式


文字列変数.indexOf( 検索したい文字, 検索開始位置 );
文字列配列.indexOf( 検索したい文字, 検索開始位置 );
文字列変数.lastIndexOf( 検索したい文字, 検索開始位置 );
文字列配列.lastIndexOf( 検索したい文字, 検索開始位置 );
// ※検索開始位置は省略可能
文字列変数.search(検索したい「文字」か「正規表現」);
文字列変数.match( /正規表現/);
配列 = 文字列変数.match( /正規表現/g );

var 変数 = regex.test(検索対象の文字列・変数);
var str = 'user-001, user-aaa, user-bbb, user-002';
var regex = /user-d+/;
var result = regex.test(str);
console.log(result);


正規表現のフラグ

フラグ説明
i 大文字小文字を区別しない。
「A」と「a」を同じとみなします。
g 条件に一致するすべてを検索する。
返り値は、「配列データ」。
指定しない場合は、最初の一致で検索を終了する。
m 複数行モード。
検索対象が複数行の場合に使用する。
s 「dotall」モードを有効にする。
「.(ドット)」が、「\n(改行文字)」 に一致するようになる。
u 「ユニコードサポート」を有効にする。
サロゲートペアの正しい処理を可能にする。
y 「スティッキーモード」(テキストの正確な位置で検索)で検索。



str = "ABCDEF";
if (str.match(/DEF/i)) {
alert("DEFを含んでいます。");
}

単に「DEF を含んでいる」という判定であれば index() を使用しても簡単にできますが、「12:34:56 のように、2桁の数値3つをコロン(:)で区切った文字列」といった複雑な検索ができる。

str = "12:34:56";
if (str.match(/^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/)) {
alert("マッチしました。");
}


Back



正規表現の文法




正規表現の文法
AAという文字
ABCABCという文字列
[ABC]A、B、Cのいずれか1文字
[A-C]A~Cまでのいずれか1文字
[^ABC]A、B、Cのいずれでもない任意の1文字
.任意の1文字
A+1文字以上のA
A*0文字以上のA
A?0文字または1文字のA
^AAで始まる文字列
A$Aで終わる文字列
ABC|DEF|GHIABCまたはDEFまたはGHI
A{2}2個のA(AA)
A{2,}2個以上のA(AA、AAA、AAAA、...)
A{2,3}2個~3個のA(AA、AAA)
[\b]バックスペース
バックスラッシュ(\)に続く文字は特別な意味を持つ。
\bスペースなどの単語の区切り
\B\b以外の文字
\cACtrl-A
\d任意の数値([0-9]と同じ)
\D数値以外の文字([^0-9]と同じ)
\fフォームフィード文字
\n改行文字
\r復帰文字
\s1文字の区切り文字([ \f\n\r\t\v])
\S\s以外の1文字
\tタブ文字
\v垂直タブ文字
\w英数文字([A-Za-z0-9_]と同じ)
\W\w以外の文字
\22番目の (...) にマッチした文字列
\o0338進数で033の文字
\x1b16進数で1bの文字
\その他その他の文字自身




Back