JavaScript(Angular)でJIS漢字コードを判定する

Angular

やること

  • AngularでJIS第一水準漢字・JIS第二水準漢字を判定する
  • 判定は文字をSJIS文字コードに変換の上、各バイト値によって行う
  • 文字コードの変換はiconv-liteを使う

環境

  • node:14.11.0
  • Angular:10.1.1
  • iconv-lite:0.6.2

インストール

SJISの文字コードを確認するため、コード変換ライブラリを導入する。ライブラリは、見た中で一番ダウンロード数が多かったiconv-liteを使用する。

npm install --save iconv-lite
npm install --save @types/iconv-lite 

※補足
globalが見つからない的なメッセージが出た場合はpolyfills.tsに以下を追記することで解消する

(window as any).global = window;

ソース

テキストボックスに入力した文字列を判定し、以下の何れに属するかを表示するようにする

判定対象

  • シングルバイト文字
  • マルチバイト文字
    • JIS非漢字
    • JIS第一水準漢字
    • JIS第二水準漢字
    • 上記以外

テンプレート作成

ng g component code-check

Html
inputに入れた文字列の判定結果を、DIV領域に出力する。
resultには文字コードでの判定結果を、result2には、漢字を正規表現の範囲指定でチェックした結果を出力する。

<div style="margin: 10px">
    <input [(ngModel)]="value" (change)="check($event.target.value)">
    <div>{{result}}</div>
    <div>{{result2}}</div>
</div>

Typescript
SJISにエンコードした結果取得できる数値配列を使ってJIS漢字コードを判定する。
SJISのマルチバイト文字の下位バイトは、16進表記で40~7E, 80~FCの範囲に限定されるので、厳密な判定ではないのだが、簡単のため境界値以外は上位バイトの範囲で判定する。

import { Component, OnInit } from '@angular/core';
import * as iconv from 'iconv-lite';

@Component({
  selector: 'app-code-check',
  templateUrl: './code-check.component.html',
  styleUrls: ['./code-check.component.css']
})
export class CodeCheckComponent implements OnInit {
  value=""
  result=""
  result2=""

  constructor() { }

  ngOnInit(): void { }

  check(target:string) {
    const charArray = Array.prototype.slice.call(target)
    const array = charArray.map(x => {
      const arr = this.toHex(x)
      // シングルバイト
      if (arr.length == 1) return "S"
      // 非漢字 ※実際は未定義エリアが散在しているため絞り込む必要有
      //  → コード表:第1面-1区-01 ~ 第1面-8区-32
      //  → SJIS:81-41 ~ 84-BE = 129-65 ~ 132-190
      if ( (arr[0] == 129 && 65 <= arr[1])
        || (130 <= arr[0] && arr[0] <= 131) 
        || (arr[0] == 132 && arr[1] <= 190) ) return "0"
      // 第一水準
      //  → コード表:第1面-16区-01 ~ 第1面-47区-51
      //  → SJIS:88-9f ~ 98-72 = 136-159 ~ 152-114
      if ( (arr[0] == 136 && 159 <= arr[1])
        || (137 <= arr[0] && arr[0] <= 151) 
        || (arr[0] == 152 && arr[1] <= 114) ) return "1"
      // 第二水準
      //  → コード表:第1面-48区-01 ~ 第1面―84区-6
      //  → SJIS:98-9f ~ EA-A4 = 152-159 ~ 234-164
      if ( (arr[0] == 152 && 159 <= arr[1])
        || (153 <= arr[0] && arr[0] <= 233) 
        || (arr[0] == 234 && arr[1] <= 164) ) return "2"
      return "X"
    })
    // できたら幸せだと思ったがうまくいかなかった
    const array2 = charArray.map(x => {
      if (x.match(/[亜-腕]/)) return "1"
      if (x.match(/[弌-熙]/)) return "2"
      return "X"
    })
    this.result = array
    this.result2 = array2
  }

  toHex(value:string) {
    return iconv['default'].encode(value, 'Shift_JIS')
  }
}

結果

参考

符号化文字方式毎の利用範囲を可視化

JIS, EUC, SJIS の漢字コードについて

SJIS文字コード表

文字コード表 シフトJIS(Shift_JIS)

JIS漢字コードの説明

JIS漢字コード:JIS第一・第二水準―文字コード入門―
文字コード入門, 睡人亭

JIS X 0208コード表

JIS X 0208コード表 - CyberLibrarian
タイトルとURLをコピーしました