日付の表示変更と、ソートの方法

Question

日付の表示変更とソートの方法が知りたいです。

たとえば、WordPressで次のタームが登録されている場合、
１月１日,２月１日,１０月１日

何もしなければその表示は
１月１日,１０月１日,２月１日

という数字順になってしまいます。

▼このように出力されてしまう。

<div class="day-area">
<li class="day"><a href="xxx">１月１日</a></li>
<li class="day"><a href="xxx">１０月１日</a></li>    
<li class="day"><a href="xxx">２月１日</a></li>
</div>

今回はこれについて、次の２点の変更方法を知りたいのです。

（１）日付け順にソートする方法
➡１月１日,２月１日,１０月１日
という順番に並べ替えたい

（２）半角にする方法
➡1/1,2/1,10/1
という表示にしたい

PHPかjavascriptか、、完っ全な丸投げですけれど笑、ちょっと気になりました。
「方法おしえてやるよ」という方がいらっしゃいましたら、なにとぞよろしくお願い致します。

Answer 1

前回と変わらないような気がしますが・・・

$(function(){
  $('li.day').get().sort(function(x,y){
    var s=[x,y].map(function(z){
      return $(z).find('a').text().replace(/([０-９]+)月([０-９]+)日/,function(){
        console.log(1);
        return ("０"+arguments[1]).substr(-2)+("０"+arguments[2]).substr(-2);
      });
    });
    return s[0]>s[1];
  }).forEach(function(x){
    $(x).closest('.day-area').append(x);
  });
});

<div class="day-area">
<li class="day"><a href="xxx">１月１日</a></li>
<li class="day"><a href="xxx">２月１日</a></li>
<li class="day"><a href="xxx">１月２日</a></li>
<li class="day"><a href="xxx">１０月１日</a></li>    
<li class="day"><a href="xxx">１月１２日</a></li>
</div>

全角→半角

UTF8であればこんな感じ

var str="０１２３９８７";
str=str.replace(/[０-９]/g,function(){
  return String.fromCharCode((arguments[0].charCodeAt(0)-65248));
});
console.log(str);

全体とおして

$(function(){
  /* 置換 */
  $('li.day a').each(function(){
    $(this).text($(this).text().replace(/[０-９]/g,function(){
      return String.fromCharCode((arguments[0].charCodeAt(0)-65248));
    }).replace(/(\d+)月(\d+)日/,function(){
      return arguments[1]+"/"+arguments[2];
    }));
  });
  /* ソート */
  $('li.day').get().sort(function(x,y){
    var s=[x,y].map(function(z){
      return $(z).find('a').text().replace(/(\d+)/(\d+)/,function(){
        return ("0"+arguments[1]).substr(-2)+("0"+arguments[2]).substr(-2);
      });
    });
    return s[0]>s[1];
  }).forEach(function(x){
    $(x).closest('.day-area').append(x);
  });
});

<div class="day-area">
<li class="day"><a href="xxx">１月１日</a></li>
<li class="day"><a href="xxx">２月１日</a></li>
<li class="day"><a href="xxx">１月２日</a></li>
<li class="day"><a href="xxx">１０月１日</a></li>    
<li class="day"><a href="xxx">１月１２日</a></li>
</div>

Comments

[退会済みユーザー]

ふと逆はどうかと思って、それができなかったのです。笑
ちなみに（２）の半角にする方法も複合できますでしょうか？

[退会済みユーザー]

８通りくらい適当に組み合わせてみたのですけれど、できませんでした。笑
どこに組み合わせるか、って、ちゃんと理解してないと難しいです(>_<)

[yambejp]

全体をとおした処理を追記しておきました

[退会済みユーザー]

明らかな丸投げに対して最後まで、根気強くご回答していただいて、、本当にあたまが下がります。どうもありがとうございます！