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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 700
退会済みユーザー

退会済みユーザー

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

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

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

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

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

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

【和製漢字の表記】

〝横書きの場合〟: 2018年7月17日 → 2018年7月17日(変更なし)


縦  2   二    7       七
書  0   〇    月      月
き  1 → 一    1  →  十
の  8   八    7       七
場  年   年    日      日

【やりたいこと】
2018年(全角) → 二〇一八年
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><!-- 数字が2文字以上並ぶ場合、半角数字を用います。 -->


【半角・全角数字の場合】

【半角数字の場合】

10 11 12 13 14 15 16 17 18 19
十一 十二 十三 十四 十五 十六 十七 十八 十九
20 21 22 23 24 25 26 27 28 29
二〇 二一 二二 二三 二四 二五 二六 二七 二八 二九
30 31 -
三〇 三一

-------------------------------------------------------------------- -

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

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

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

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

**追記

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

var henkanhyo={"0":"〇","1":"一","2":"二","3":"三","4":"四","5":"五","6":"六","7":"七","8":"八","9":"九","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])|1(?=[1-9])|10|10/g,"十").replace(/[0-9]|[0-9]/g,function(x){return henkanhyo[x]});
        $(".tategaki").text(v);
    });
}

<!-- html -->
<div class="tategaki">2018717日ー1128日:2018年3月15日ー12月25日:2108年3月31日</div>
<div class="tategaki">2018年12月11日</div>
<!-- 2つとも、同じクラスでそれぞれに適用させたいと考えています。 -->

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/12/11 12:04

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/12/11 12:07

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

    キャンセル

  • 退会済みユーザー

    2018/12/11 16:34

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+2

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

<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":"九",
  "0":"〇","1":"一","2":"二","3":"三","4":"四","5":"五","6":"六","7":"七","8":"八","9":"九",
};
$(function(){
  var v=$(".tategaki").text();
  v=v.replace(/1(?=[1-9])|1(?=[1-9])|10|10/g,"十").replace(/[0-9]|[0-9]/g,function(x){return henkanhyo[x]});
  $(".tategaki").text(v);
});
</script>
<div class="tategaki">「あああ」2018年7月17日ー11月28日:2018年3月15日ー12月25日:2108年3月31日</div>

※上記、2108は10が先に反応して2十8→二十八になります、
仕様をよくよく検討してください

縦横切替

<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":"九",
  "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])|1(?=[1-9])|10|10/g,"十").replace(/[0-9]|[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">2018年3月15日ー12月25日:2108年3月31日</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/11 12:55

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

    キャンセル

  • 2018/12/11 13:10

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

    キャンセル

  • 2018/12/11 14:09

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

    キャンセル

  • 2018/12/11 19:02

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • アラビア数字(1,2,3...)を、漢数字(一,二,三...)へ変換する方法。【全角の0〜9、半角の0〜31まで】