1.事前知識
- 初心者でも出来るHTML入門1
- 初心者でも出来るHTML入門2
- 初心者でも出来るHTML入門3
- 初心者でも出来るHTML,JavaScript入門4
- 初心者でも出来るHTML,JavaScript入門5
- 初心者でも出来るHTML,JavaScript入門6
事前知識として、上記リンクの内容が必要です。
2.「'（シングルクォート）」を含む文字列
「'（シングルクォート）」を含む文字列
<script type="text/javascript">
//that's を変数に入れたいとき
var str = 'that\'s';
</script>
- 「
that's」 のような「'（シングルクォート）」を含む文字列は、「'（シングルクォート）」の前に\をつけることで表示できる。
3.文字列の検索
文字列の検索
<script type="text/javascript">
//変数
var str = 'Hello123';
//文字列の検索 変数名(文字列).indexOf()
var result = str.indexOf( 'l' );
</script>
-
文字列の検索には、indexOf()を使う。 -
indexOf()は、第1引数に検索したい文字を指定し、文字列の先頭（0番目）から1文字ずつ検索をし、最初に一致した位置（index番号）を数値で返す。 -
indexOf()の第2引数には、検索開始位置を指定する(省略可能)。
4.文字列の抽出
文字列の抽出
<script type="text/javascript">
//変数
var str = "a1ab12abc123abcd1234";
//文字列の抽出(数値) 変数名.match(/\d{ 桁数以上 , 桁数以下 }/g);
//文字列の抽出(文字) 変数名.match(/[ 開始文字列 - 終了文字列] /g);
var result = str.match(/\d{2,4}/g);
var result2 = str.match(/[A-z]/g);
</script>
| 記述法 | 意味 |
|---|---|
| /ABC/ | 「ABC」という文字列。 |
| [] | カッコ内の任意の1文字。 |
| [ABC] | A、B、Cのいずれか。 |
| [A-z] | アルファベット全て。 |
| [0-9] | 半角数字全て。 |
| [０-９] | 全角数字全て。 |
| [ぁ-ん] | ひらがな全て。 |
| [ァ-ヴ] | カタカナ全て。 |
| . | 何らかの1文字。 |
| * | 直前の1文字を0回以上の繰り返し。 |
| ^ | 行の先頭。 |
| $ | 行の末尾。 |
| ? | 直前の文字が0または1個の場合。 |
| \w | 大文字小文字を含む英数字とアンダースコア |
| \d | 0～9の数字。 |
| \s | タブ、改行、改ページ、スペース。 |
-
文字列の抽出には、match()を使う。 -
match()は引数に正規表現(検索条件)を指定し、文字列の先頭（0番目）から1文字ずつ検索をし、条件と一致した文字または数値を返す。 -
正規表現は、 上記の記述法を参考に作ることができる。
5.記述例
- 文字列の検索
js1_3_1.html
<!DOCTYPE html>
<html>
<head>
<!-- 付加情報 -->
<!-- タイトル -->
<title>JavaScriptの説明</title>
<!-- 文字コードの指定 -->
<meta charset="utf-8" />
</head>
<body>
<!-- コンテンツ -->
<!-- インラインスクリプト -->
<script type="text/javascript">
//変数
var str = 'Hello';
//文字列の検索 変数名(文字列).indexOf()
var result = str.indexOf( 'l' );
//ドキュメントの出力を開始
document.open();
//ドキュメントに文字列を書き出す
document.write(str);
document.write('<br/>');
document.write(result);
document.write('<br/>');
//ドキュメントの出力を終了
document.close();
</script>
</body>
</html>
- 文字列の抽出
js1_3_2.html
<!DOCTYPE html>
<html>
<head>
<!-- 付加情報 -->
<!-- タイトル -->
<title>JavaScriptの説明</title>
<!-- 文字コードの指定 -->
<meta charset="utf-8" />
</head>
<body>
<!-- コンテンツ -->
<!-- インラインスクリプト -->
<script type="text/javascript">
//変数
var str = "a1ab12abc123abcd1234";
//文字列の抽出(数値) 変数名.match(/\d{ 桁数以上 , 桁数以下 }/g);
//文字列の抽出(文字) 変数名.match(/[ 開始文字列 - 終了文字列] /g);
var result = str.match(/\d{2,4}/g);
var result2 = str.match(/[A-z]/g);
//ドキュメントの出力を開始
document.open();
//ドキュメントに文字列を書き出す
document.write(str);
document.write('<br/>');
for(r in result){
document.write(result[r]);
document.write('<br/>');
};
document.write('<br/>');
for(r in result2){
document.write(result2[r]);
document.write('<br/>');
};
//ドキュメントの出力を終了
document.close();
</script>
</body>
</html>
中身の文をコピーして、文字コードは UTF-8 を指定し、ファイル名を js1_3_1.html , js1_3_2.html でデスクトップに保存するとブラウザではこうなります↓↓
-
js1_3_1.html(文字列の検索)
-
js1_3_2.html(文字列の抽出)
画像のようになれば成功です。
6.GitHub
GitHubにソースコードを公開しています。