Core > 日付の操作(複数行) 改良版4

日付の操作ライブラリを目指す。 年を指定できるように変更 month: 1 date: 1 2 3 1日(月) 2日(火) 3日(水)

by s_hiroshi

HTML

<div id="example">
    <p>
        変換前<br>
        名前1　１　１０　３０<br>
        名前2　１、　１０、３０
    </p>
    <p>
        変換後<br>
        &lt;月&gt;<br>
        名前1<br>
        1日(日)<br>
        10日(火)<br>
        30日(月)<br>
        <br>
        &lt;月&gt;<br>
        名前2<br>
        1日(日)<br>
        10日(火)<br>
        30日(月)<br>
    </p>
</div>
<div id="error"></div>
<div id="formarea">
    <fieldset>
        <label for="month">Month</label>
        <input id="month" name="month" type="text" size="2"> 1〜12 ※空白は今月を指定
    </fieldset>
    <fieldset>
        <label for="date">変換前</label><br />
        <textarea id="date" rows="4" cols="30"></textarea>
    </fieldset>
    <fieldset>
        <label for="result">変換後(HTML)</label><br />
        <textarea id="result" rows="4" cols="30"></textarea>
    </fieldset>
</div>

CSS

body {
    margin: 15px;
}
p {
    margin-bottom: 12px;
}
#error {
    color: #990000;
}
input {
    padding: 2px;
    line-height: 1.5;
    
}
fieldset {
    margin-bottom: 12px;
}
#example {
    font-size: 85%;
    margin-bottom: 30px;
}

JavaScript

// 全角数字を半角数字に変換(toHalfNum)は下記のサイトのスクリプトを利用。
// http://ameblo.jp/pclindesk/entry-10110151969.html

function myError(str) {
    $('#error').text(str);
}


$('#date').blur(function() {
    var i;
    var now = new Date();
    var resultHtml = '';
    var matches = [];
    var month;
    var dayOfWeek = ['日', '月', '火', '水', '木', '金', '土'];

    // ヘルパー
    // 全角数字を半角数字へ変換する(下記サイトのスクリプト)
    // http://ameblo.jp/pclindesk/entry-10110151969.html

    function　toHalfNum(src) {
        return src.replace(/[．０-９（）]/g, function(wc) {
            var zen = "．。０１２３４５６７８９（）",
                han = "..0123456789()";
            return han[zen.indexOf(wc)];
        });
    };


    // String.replaceのコールバック

    function replaceHandler() {
        // 空白を削除
        arguments[0] = arguments[0].replace(/ /, '');
        
        // 数字のみの場合は日を追加
        if (arguments[0].match(/[^0-9]/) === null) {
            // 月は0(1月)～11(12月) ※ 日は1～始まる
            var year = now.getFullYear(),
                // getYearはブラウザによって挙動が異なる
                date = new Date(year, month, arguments[0]);
            resultHtml += arguments[0] + '日(' + dayOfWeek[date.getDay()] + ')' + '\n';
        } else {
            resultHtml += arguments[0] + '' + '\n';
        }
        // 31(火)を31日(火)へ
        resultHtml = resultHtml.replace(/([0-9]+)\(/g, '$1日(')
    }


    // メイン処理開始
    // 月の処理(月は0〜11)
    
    if ($('#month').val() !== '') {
        if (12 < parseInt($('#month').val(), 10)) {
            myError('1〜12を入力');
            return false;
        }
        month = parseInt($('#month').val(), 10) - 1;
    } else {
        month = now.getMonth();
    }

    // 改行による分割
    var matches = $(this).val().split('\n');

    // 行ごとの処理
    for (i = 0; i < matches.length; i++) {
        // 全角数字を半角数字へ
        var match = toHalfNum(matches[i]);
        // 区切文字(連続)を空白(1つ)へ統一
        match = match.replace(/(\s|[,、])+/g, ' ');
        // 空白で区切った文字列ごとの処理
        resultHtml += '<' + (month + 1) + '月>' + '\n';
       ...