アラビア数字（1,2,3...）を、漢数字（一,二,三...）へ変換する方法。【全角の０〜９、半角の0〜31まで】

Question

いつもお世話になっております。

現在、「縦書き」と「横書き」に対応したWebサイトを作っており、
横書きのときは「アラビア数字（1,2,3...）」を、縦書きのときは「和製漢字（一,二,三...）」に切り替えようと思考錯誤しております。

具体的には、変換したい数字にはあらかじめ手動で<span class=""></span>タグを適用させ、
その要素をjavascriptかphpで拾うことにより処理ができないかと考えています。

和製漢字は複雑で、すべての数字を適応させることは難しいです。
また、すべての数字を正規の和製漢数字として対応させることも不可能に近いと考えているため、全角数字の０〜９までを、そして
半角数字は0〜31までを対応させたいと考えております。

具体的な表記やHTMLでのマークアップ方法は以下になります。

/-------------------------------------------- 例 ------------------------------------------------------/

【和製漢字の表記】

〝横書きの場合〟: ２０１８年７月17日 → ２０１８年７月17日（変更なし）

〟
縦　　２　 二 7 七
書　　０　 〇 月 月
き　　１ → 一 1 → 十
の　　８　 八 7 七
場　　年　 年 日 日
合
〝

【やりたいこと】
２０１８年（全角）　→　二〇一八年
７月（全角）17日(半角)　→　七月　十七日

<!-- htmlのマークアップ -->
<span class="num_zen">２</span><span class="num_zen">０</span><span class="num_zen">１</span><span class="num_zen">８</span>年
<span class="num_zen">７</span>月<span class="num_han">27</span>日
<!-- 数字が２文字以上並ぶ場合、半角数字を用います。 -->

【半角・全角数字の場合】
|０|１|２|３|４|５|６|７|８|９|
|:--|:--:|--:|:--|:--:|--:|:--|:--:|--:|
|〇|一|二|三|四|五|六|七|八|九|

【半角数字の場合】

|10|11|12|13|14|15|16|17|18|19|
|:--|:--:|--:|:--|:--:|--:|:--|:--:|--:|
|十|十一|十二|十三|十四|十五|十六|十七|十八|十九|

|20|21|22|23|24|25|26|27|28|29|
|:--|:--:|--:|:--|:--:|--:|:--|:--:|--:|
|二〇|二一|二二|二三|二四|二五|二六|二七|二八|二九|

30	31	-
三〇	三一

---

表を作成中に「半角数字と全角数字は分ける必要がないのではないか？」とも思ったのですが、
例えば「１歩１歩」や「１つ１つ」という言葉のように、横書きのときには全角数字を用いて余韻を持たせたい場合があります。

また、もし31以上の数字を漢数字にしたい場合は全角数字を用いることで対応させます。
【例：100万円(半角)ではなく１００万円（全角）とすることで、縦書きのときは一〇〇万円とします。】

arrayを用いれば上手く実装できそう…とは思うのですが、当方のベースとなる知識は浅はかなものです。
なので、具体的なコードを用いてご指摘いただけるととても嬉しいです。

０〜９までの全角数字、そして0〜31までの半角数字を和製漢字として適用させる方法をどなたか教えていただけると嬉しいです。

**追記

いただいた回答を元に現状を更新します。
yambejpさんが回答していただいたコードで無事に作動するようになりました。
現在は縦書きから横書きにしたときに、データを元に戻したいと考えています。
また、同じクラスの要素でまとめているため、それぞれに適用させるためeachで囲んでみましたが上手くいきませんでした。
適切な方法がありましたらご教授ください。

var henkanhyo={"0":"〇","1":"一","2":"二","3":"三","4":"四","5":"五","6":"六","7":"七","8":"八","9":"九","０":"〇","１":"一","２":"二","３":"三","４":"四","５":"五","６":"六","７":"七","８":"八","９":"九",};
function henka(){
	var v=$(".tategaki").text();
		v.each(function() {
		v=v.replace(/1(?=[1-9])|１(?=[１-９])|10|１０/g,"十").replace(/[0-9]|[０-９]/g,function(x){return henkanhyo[x]});
		$(".tategaki").text(v);
	});
}

<!-- html -->
<div class="tategaki">2018年7月17日ー11月28日：２０１８年３月１５日ー１２月２５日：２１０８年３月３１日</div>
<div class="tategaki">2018年１２月１１日</div>
<!-- ２つとも、同じクラスでそれぞれに適用させたいと考えています。 -->

参考にしたサイト
・javascriptで数字を漢数字に変換する方法｜正規表現で日付を年月日に分ける - TECHHOT
・JavaScriptで曜日ごとに文言の表示を変更する方法

Comments

[yambejp]

英数字じゃなくて数字ですね、【半角・全角英数字の場合】 と【半角英数字の場合】 だと半角という条件が競合します

[Takumiboo]

Javascriptで行う例についてはすでにご提示のURLにサンプルがあるように思いますが？

[退会済みユーザー]

【yambejpさん】これは大きな勘違いをしておりました…ご指摘ありがとうございます。修正しました。

[退会済みユーザー]

【Takumiboo】はい、こちらの記事を参考にさせていただきましたが、spanタグを用いた場合にどのように指定すれば置き換えることができるのか実装方法が分からないため、具体的なご提案をして頂ければと思いご質問しました。

Answer 1

変換表を使って調整します

<style>
div.tategaki {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var henkanhyo={
  "0":"〇","1":"一","2":"二","3":"三","4":"四","5":"五","6":"六","7":"七","8":"八","9":"九",
  "０":"〇","１":"一","２":"二","３":"三","４":"四","５":"五","６":"六","７":"七","８":"八","９":"九",
};
$(function(){
  var v=$(".tategaki").text();
  v=v.replace(/1(?=[1-9])|１(?=[１-９])|10|１０/g,"十").replace(/[0-9]|[０-９]/g,function(x){return henkanhyo[x]});
  $(".tategaki").text(v);
});
</script>
<div class="tategaki">「あああ」2018年7月17日ー11月28日：２０１８年３月１５日ー１２月２５日：２１０８年３月３１日</div>

※上記、２１０８は１０が先に反応して２十８→二十八になります、
仕様をよくよく検討してください

縦横切替

<style>
div.tategaki {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
float:right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var henkanhyo={
  "0":"〇","1":"一","2":"二","3":"三","4":"四","5":"五","6":"六","7":"七","8":"八","9":"九",
  "０":"〇","１":"一","２":"二","３":"三","４":"四","５":"五","６":"六","７":"七","８":"八","９":"九",
}
$(function(){
  $('.contents').each(function(){
    $(this).data('yokogaki',$(this).text());
    var v=$(this).text();
    v=v.replace(/1(?=[1-9])|１(?=[１-９])|10|１０/g,"十").replace(/[0-9]|[０-９]/g,function(x){return henkanhyo[x]});
    $(this).data('tategaki',v);
    });
  $('[name=shosiki]').on('change',function(){
    if($(this).val()=='tategaki'){
      $('.contents').addClass('tategaki').removeClass('yokogaki').text(function(){return $(this).data('tategaki');});
    }else{
      $('.contents').removeClass('tategaki').addClass('yokogaki').text(function(){return $(this).data('yokogaki');});
    };
  }).filter(':checked').trigger('change');
});
</script>
<label><input type="radio" name="shosiki" value="tategaki" checked>縦書き</label>
<label><input type="radio" name="shosiki" value="yokogaki">横書き</label>
<div class="contents">「あああ」2018年7月17日ー11月28日</div>
<div class="contents">２０１８年３月１５日ー１２月２５日：２１０８年３月３１日</div>

Comments

[退会済みユーザー]

なるほど…変数はこのように指定できるのですね。１つ１つ分解して意味を理解しながら活用できるように学んでいきたいと思います。素晴らしい教材の提供をありがとうございます！
無事に実装できそうです。本当にありがとうございました^-^!!

[退会済みユーザー]

度々申し訳ありません。縦書きから横書きに切り替えた場合にはアラビア数字に戻したいと思っているのですが、<div class="tategaki"></div>の値をなにかで取得しておく必要があるのでしょうか。置換した値を元に戻すためにはどのようにすればよいのでしょうか。

[yambejp]

切り替えたいとのことなので、縦書き用のデータと横書き用のデータをカスタムデータに保持させました

[退会済みユーザー]

ありがとうございます！！