HTML、丸数字に自動変換。

〽️ ⑪〜㊿までが一瞬で。




丸数字、めんどくさい！

こんにちは、「ふ」です。
webサイトにおいて、項目を並べた記述をすることもよくあると思います。

その場合に手間が掛かるのが、①②③..という「丸数字」の入力。

macの場合で示しますが、全角カナ数字で1〜10までは、変換候補が表示されます。
大抵は候補の初めのほうで丸囲み文字が出てくるでしょう。

しかし「11」以降は「まるすうじ」と入力し、大量にある変換候補の中から目的の数字を選んでくることになります。これがなかなかに面倒くさい💧

自動変換させよう。

そこで。

今回は正規表現を数値実体参照を使って、丸数字に自動変換するJavaScriptを作ってみました。
１〜５０の数字なら、自動的に変換させることができます。

正規表現？数値実体参照？ 〜と身構えることはありません。コピペして、方法を知るだけですぐに使えるようになります。
このスクリプトをHTMLに含めることで、作業の効率化に役立ててください。

「いきなり使いたい！」の人。
コピペコードと使い方にジャンプしてください。

「仕組みから理解して応用させたい」方は、そのまま次のセクションを読み進めてくださいね。

仕組み。


自動変換のながれとしては、

　「決まったパターンで数値を記述」→「正規表現で取り出し」→「数値実体参照に置き換える」

というものです。詳しくみていきましょう。

数値実体参照。

普段HTMLの文章を記述するとき、エディタには直接テキストを打ち込んでブラウザに表示させていることでしょう。当たり前ですが。

それに対し数値実体参照とは、直接文字コードを入力してその文字を表示させる、という方法です。

例えば丸数字の①の文字コードは、「＆#9312」です。エディタに文字コードをタイプすると、ブラウザに対応した文字が表示されます。
数値実体参照では、１〜50までの丸数字を表示することができます。

正規表現。

正規表現は、指定した文字列のパターンのみ取得することができます。たとえば、

あいうえお12345

⬆︎のような文字列から、数値部分のみを取り出してみましょう。０〜９の数値のパターンを正規表現でつくると、

/[0-9]/g

となります。これをJavaScriptで取り出してみます。

let str = “あいうえお12345”; console.log(str.match(/[0-9]/g); bb「「３>> (5) ['1', '2', '3', '4', ‘5']」」

数値のみを取り出すことができました。

パターンを取り出し、実体参照に変換。


@15@あいうえお

HTML内において、丸数字にしたい数値を一定のパターンで記述するようにします。
今回は⬆︎のように「@〜@に挟まれている」というパターンにしました。


この「@〜@に挟まれているパターン」を正規表現で取り出します。そして挟まれている数値に基づいて、丸数字の数値実体参照に変換すれば....

@..@で数値を入力するだけで、自動的に丸数字に変換される、という仕組みです。

パターンの作り方は任意ですが、「どう考えても使いそうにない」ものにしましょう。そうでないと意図していない部分が丸数字に変換される恐れがあります。
今回sampleでつかう「@〜@」（@に挟まれた1~50の数値）というパターンは、普段使いそうにないものを想定して選択したものです。

コーディング。


<p class = "maru"> @11@あいうえお </p>

丸数字にしたい要素を準備しました。
class名は「maru」、テキストには@で囲まれた「11」（半角英数字）を含めています。

要素に含まれる「@〜@」を丸数字に変換するためのJavaScriptを書いていきます。

「「３//@〜@に囲まれた1〜50の数値パターン」」 let regexp = 「「１/@([1-9]|[1-4][0-9]|50)@/g;」」

変数「regexp」を宣言。「@〜@に囲まれた1〜50の数値パターン」を代入しておきます。
「|」（パイプ）は、「または」を意味します。

[ 1 - 9 ]　→１〜９または
[ 1 - 4 ][ 0 - 9 ]　→１０〜４９または
50　→５０

とすることで、１〜５０の数値をカバーしています。

「「３//取り出したものを数値化し、実体参照に変換」」 function generate(value) { 「「３//数字部分のみ取り出し」」「「１ ..①」」 let suutinomi = value.replace(/[^0-9]/g,""); 「「３//変換できるよう数値化する」」「「１ ..②」」 let kazu = Number(suutinomi); 「「３//条件分岐して変換」」「「１ ..③」」 if(kazu <= 20) ｛ bb kazu = kazu+9311; bb｝ else if(kazu <= 35) ｛ bb kazu = kazu+12860; bb｝ else if(kazu <= 50) ｛ bb kazu = kazu+12941; bb｝ 「「３// 「&#」をくっつける」」「「１ ..④」」 return `&#$｛String(kazu)｝;`; }

正規表現で取り出した文字列を、数値実体参照に変換するための関数です。

① 正規表現で取り出してきた文字列は、「@11@」というように、まだ数値が「@」に挟まれた状態です。replaceメソッドを使い、数値のみの状態に変換しましょう。

　第１引数の「/[^0-9]/g」は、「数値以外」を表すパターンです。
　第２引数には変換後の文字列を指定します。ここには「""」（何もなし）としています。

「数値以外」を「何もなし」に変換した結果、数値のみの文字列になる、ということです。

② ①で取り出した値のデータ型はまだ「文字列（String）」です。
このあと数値をもとにして、対応する数値実体参照の文字コードを導きます。Numberメソッドを使って、「number」に型変換しておきましょう。

③ 数値から実体参照へと変換します。
数値実体参照は「&#〇〇（〇〇は数値）」の形で表されるのですが、ここでは数値を「〇〇」の部分に変換します。「&#」はあとからくっつけることとします。

ただし、「1〜50」の文字コードは完全な連番になっているわけではないので、⬇︎のように条件分岐する必要があります。

・1〜20までは&#9312〜&#9331と、文字コードが連番になっています。なので「数値＋9311」で導くことができます。

・21から連番の内容が少し飛んで、21〜35までは&#12881〜&#12895となります。「数値＋12860」で導きます。

・さらに、36〜50は&#12977〜&#12991です。この範囲は「数値＋12941」で対応します。

④ 導かれた数字に「&#」をくっつけて、文字コードを完成させます。
「return」で、この関数の返り値とします。

「「３//class「maru」を全て取得」」「「１ ..⑤」」 let maru = document.querySelectorAll(".maru"); 「「３//HTMLをreplace」」「「１ ..⑥」」 maru.forEach(function(value) ｛ bbvalue.innerHTML = value.innerHTML.replace(regexp,generate); ｝);

作成した正規表現のパターンと変換関数を使って、「@〜@」を丸数字に書き換えましょう。

⑤ class名「maru」の要素を全て取得。

⑥ 内部のHTMLに対し、replaceメソッドを使って書き換えを行います。

第１引数のregexpで、「@〜@」を取り出し。
変換後の文字列を指定する第２引数に、generate関数の返り値を参照させます。

〜これでJavaScriptの記述はOKです。

使ってみよう。


それでは「丸数字変換」を実際に使ってみましょう。

<meta charset = "UTF-8">

はじめにHTMLの文字コードはUTF-8にしておいてください。<head>部分で確認できます。

コピペコード。


let regexp = /@([1-9]|[1-4][0-9]|50)@/g; function generate(value) { let suutinomi = value.replace(/[^0-9]/g,""); let kazu = Number(suutinomi); if(kazu <= 20) ｛ bb kazu = kazu+9311; bb｝ else if(kazu <= 35) ｛ bb kazu = kazu+12860; bb｝ else if(kazu <= 50) ｛ bb kazu = kazu+12941; bb｝ return `&#$｛String(kazu)｝;`; } let maru = document.querySelectorAll(".maru"); maru.forEach(function(value) ｛ bbvalue.innerHTML = value.innerHTML.replace(regexp,generate); ｝);

さっきのセクションで解説したJavaScriptコードをまとめたもの⬆︎です。
これをコピーして、HTMLの<body> 〜 </body>のなるべく下のほうにペーストしてください。

丸数字変換を行いたいコードより先に記述すると、要素を取得してくれません。注意しましょう。

<p class = "maru"> @10@ @20@ @50@ </p>

扨（さて）ここまで来たらあとはclassとパターンをタイピングするだけ！
class名を「maru」とし、1〜50までの半角英数字を「@」で囲んでタイプしてください。



@10@ @20@ @50@

ブラウザ上で、自動的に丸数字に変換したものが表示されます。
便利過ぎますね ♪

仕組みを知ると応用できる。


最後までお読みくださり、ありがとうございます。

今回は「丸数字の自動変換」について紹介してきましたが、文字実体参照と正規表現を使った自動変換は、丸数字に限らずさまざまな場面で利用することができます。

「「１シアン」」 「「５オレンジ」」 「「３グレー」」

このページに使っているサンプルコードの色分け表示も、同じ方法で自動変換させているんです。あらかじめテンプレート用のHTMLファイルに組み込んでおくことで、決められたパターンをタイプすれば一瞬で色分けができてしまいます。
正規表現は少しハードルの高いものかもしれませんが、サイト記事作成において圧倒的な効率化が実現します。興味があればぜひ、研究してみてくださいね。

ではまた〜 ♪



JavaScript、乱数の範囲や重複を指定〜Math.random使い方。

2021.11.17
整数/範囲/重複の有無を自在にあやつろう。

JavaScriptコードの「？」をまとめたページはこちら⬆︎。









「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。