初心者でも出来るHTML,JavaScript入門7

## 1.事前知識
- [初心者でも出来るHTML入門1](https://qiita.com/ryome/items/9ec3819e5e9ab5321553)
- [初心者でも出来るHTML入門2](https://qiita.com/ryome/items/4e19c19d3166a01bc0fc)
- [初心者でも出来るHTML入門3](https://qiita.com/ryome/items/72408fb260d1576fcb25)
- [初心者でも出来るHTML,JavaScript入門4](https://qiita.com/ryome/items/152ebca06eda9fe05b39)
- [初心者でも出来るHTML,JavaScript入門5](https://qiita.com/ryome/items/c5e7716ff58bbced5173)
- [初心者でも出来るHTML,JavaScript入門6](https://qiita.com/ryome/items/4a75d5d3df0c6355accd)

事前知識として、上記リンクの内容が必要です。

## 2.「'（シングルクォート）」を含む文字列
```html:「'（シングルクォート）」を含む文字列
<script type="text/javascript">
    //that's を変数に入れたいとき
    var str = 'that\'s';
</script>
```

- 「` that's `」 のような「'（シングルクォート）」を含む文字列は、「'（シングルクォート）」の前に `\` をつけることで表示できる。

## 3.文字列の検索
```html:文字列の検索
<script type="text/javascript">
    //変数
    var str = 'Hello123';

    //文字列の検索　変数名(文字列).indexOf()
    var result = str.indexOf( 'l' );
</script>
```

- `文字列の検索`には、`indexOf()`を使う。
- `indexOf()` は、第1引数に `検索したい文字` を指定し、文字列の先頭（0番目）から1文字ずつ検索をし、 `最初に一致した位置（index番号）` を数値で返す。
- `indexOf()` の第2引数には、 `検索開始位置` を指定する(省略可能)。

## 4.文字列の抽出
```html:文字列の抽出
<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.記述例

- 文字列の検索

```html: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>
```
- 文字列の抽出

```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_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/b844a92b-4c46-4288-2e9d-91baab5efae5.png)

- js1_3_2.html(文字列の抽出)
![js1_3_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/b4392f03-c4b7-f68c-8d7f-dea5581be6ce.png)

画像のようになれば成功です。

## 6.GitHub
GitHubにソースコードを公開しています。

https://github.com/ryomeblog/qiita/tree/master/%E5%88%9D%E5%BF%83%E8%80%85%E3%81%A7%E3%82%82%E5%87%BA%E6%9D%A5%E3%82%8BHTML%2CJavaScript%E5%85%A5%E9%96%807