文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode

2022.10.05

Logging

おはようございます、先日(日曜日のこと)は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。

さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、PC(コンピューター)にとっては奥が深いです・・・日本語漢字も面倒だけどエジプト系の象形文字系(unicode)は本当に面倒そうです。まだ、作りかけですがツイッターの用な文字コードのカウントするjavascriptコードを書きましたのでサンプルコードとしてご使用ください

※WindowsOSの環境下でChromeブラウザ動作させ検証しました。コピペ文字には対応していません😇。UTF-8 ではない違う文字コードを貼り付けてみてください、変なことになると思います😂。例えばEUC文字コードだとか・・・。

動作サイトはこちらです。

        function moji(o) {
            let m = o.nextElementSibling;
            //ads
            let h = ((o) => {
                let l = o.value.match(/(https?:\/\/[a-z|A-Z|0-9|\-|_|%|\.|\/]{0,})/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 23),
                    mlen: ml
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            //zenkaku            
            let k = ((o) => {
                let l = o.value.match(/[^\x20-\x7e]/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 2),
                    mlen: l.length
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            m.innerHTML = "【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】";
            if ((o.value.length + h.len - h.mlen + k.len - k.mlen) >= 280) {
                m.innerHTML = "<span class='text-danger'>【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】</span>";
            }
        }
                    <label for="my-textarea" class="h3">文字を入力してください。</label>
                    <textarea id="my-textarea" class="form-control" oninput="moji(this);" name="" rows="3"></textarea>
                    <span class="h3"></span>

尚、サンプルコードは1バイトを一文字としてカウントしていきます、そしてURL文字はどんなに長くても23文字にカウントされます、これはTwitter社の仕様と合わしています。URL文字はURL短縮が行われ23文字の短縮URLが生成されるからその様にカウントしているのですが、なんか本物と違うですよね挙動が・・・🙇‍♂。因みに絵文字がどのようにカウントされるかは確認していません。

UTF8では絵文字(unicode)を3バイトで表記させているそうです。昔、UTF-8は2バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。

タグ

8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, , , 対応, , 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, , 簡単, 記載, , 象形, 面倒,

文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文字とかの話。

2017.07.14

Logging


文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文字とかの話。
会社でこちらの件でモヤモヤして最終的に解決できたのだけどなんだか腑に落ちないので自宅に帰って文字化けの検証をしてみました。勤めている会社はサイトコピー防止の為なのか、未だにEUC-JPコードで動いています(楽天とかもEUCだったりする🙄)。なので、会社のWEBシステムのファイルはEUCなのです。ブラウザ側がEUCだけどAjaxで送受信しているから強制的にUTF8で送られる?ので、PHP側で正しい文字コードで変換しないと文字化けするですね🤔。👈此処らへんサーバーサイドも絡んできます。
レスポンスされた文字コードも表面上は難なく表示されます。その戻ってきた文字をコピペしてWindowsのテキストファイルなどにペースト(貼り付ける)すると文字化けを起こす文字があります。
酷いときは文字が消える文字化け表示されるという問題がおきるのです。

その時、はてなって思った訳です🙄

何故・・・起きるのかPHPでエンコードするときの問題に変換にミスっていると思っていたが、そうではなかった。
WindowsエディタがSJISだったのです。要するにブラウザの文字コードとWINDOWSエディタの文字コードに違いがあった為、ある一部の文字コードで文字化けを起こしていました。

ブラウザ側がUTF8やEUC文字コードをエクセルファイルに貼り付けたら、一部の文字コードがバグったりします・・・。これは文字コードを扱うバイト領域等が違って起きる現象です。

追記2022/10/03:記事の文言を修正しました。

タグ

8, ajax, EUC, euc-jp, php, Unicode, UTF-, web, Windows, コード, こちら, コピー, コピペ, サーバー, サイト, システム, テキスト, とき, ファイル, ブラウザ, ペースト, べん, レスポンス, , 会社, 依存, , 問題, 変換, 文字, 文字化け, 検証, 楽天, 機種, 此処ら, , , 自宅, 表示, 表面, 解決, , 送受信, 防止,