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

14943 ワード
新人プログラマ応援 JavaScript プログラミング初心者 プログラミング教育 HTML5 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にソースコードを公開しています。