全角数字を半角数字に変換するだけのアレ

全角数字を半角数字に変換するだけのアレ

by mach3ss

HTML

<!-- #container -->
<div id="container">

    <h1>全角英数字を半角英数字に変換するだけのアレ</h1>
    <div class="item" id="source">
        <h2>SOURCE</h2>
        <form action="">
            <textarea name="content" cols="30" rows="10"></textarea>
            <input type="submit" value="REPLACE">
        </form>
    </div>


    <div class="item" id="result">
        <h2>RESULT</h2>
        <p class="note"></p>
        <textarea name="content" cols="30" rows="10"></textarea>
    </div>
</div>
<!-- /#container -->

CSS

body {
    margin:0;
    padding:0;
}
#container {
    position:relative;
    width:800px;
    background-color:#eee;
    padding:20px;
}
#result {
    display:none;
}
h1 {
    background-color:#456;
    color:#fff;
    padding:1em;
    margin:-20px -20px 0 -20px;
}
h2 {
    color:#456;
}
input[type=submit] {
    display:block;
    padding:10px;
}
textarea {
    width:780px;
}

JavaScript

$(document).on("submit", "#source form", function(e) {
    e.preventDefault();

    var source, count, str, result;

    source = $(this).find("textarea[name=content]");
    result = $("#result");
    count = 0;
    str = source.val().replace(/[０-９]/g, function(a) {
        var diff = "０".charCodeAt(0) - "0".charCodeAt(0);
        count += 1;
        return String.fromCharCode(a.charCodeAt(0) - diff);
    });
    str = str.replace(/[ａ-ｂＡ-Ｂ]/g, function(a) {
        var diff = "ａ".charCodeAt(0) - "a".charCodeAt(0);
        count += 1;
        return String.fromCharCode(a.charCodeAt(0) - diff);
    });
    result.hide();
    result.find("textarea[name=content]").val(str);
    result.find(".note").text(count + " strings have been replaced.");
    result.fadeIn();
});