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

1.事前知識

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

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にソースコードを公開しています。