Reactで、全角と半角を変換する入力欄を作る方法

// 全角と半角を、選んだ種類の文字だけ変換する関数

export type Kinds = {
  alnum: boolean; // 英数字（0-9 A-Z a-z）
  symbol: boolean; // 記号（! から ~ までの英数字以外）
  kana: boolean; // カタカナと「。」「、」「・」「ー」など
  space: boolean; // スペース
};

export const ALL: Kinds = { alnum: true, symbol: true, kana: true, space: true };

// 半角の英数字・記号と、全角の英数字・記号は、文字コードが 0xFEE0 ずれている
const OFFSET = 0xfee0;
const isAlnum = (c: string) => /[0-9A-Za-z]/.test(c);

// 半角カナ（U+FF61〜U+FF9F）と全角の対応表を、Unicode の正規化から作る
const kanaToHalf = new Map<string, string>();
for (let cp = 0xff61; cp <= 0xff9f; cp++) {
  const half = String.fromCodePoint(cp);
  kanaToHalf.set(half.normalize('NFKC'), half);
}
// 単独の濁点・半濁点（゛゜）も半角の ﾞ ﾟ にする
kanaToHalf.set('゛', 'ﾞ');
kanaToHalf.set('゜', 'ﾟ');
// ガ・パ・ヴなどは、NFD で「カ＋濁点」に分けてから、半角の2文字にする
for (let cp = 0x30a1; cp <= 0x30fa; cp++) {
  const full = String.fromCodePoint(cp);
  if (kanaToHalf.has(full)) continue;
  const [base, mark] = full.normalize('NFD');
  const halfBase = kanaToHalf.get(base);
  if (halfBase && (mark === '゙' || mark === '゚')) {
    kanaToHalf.set(full, halfBase + (mark === '゙' ? 'ﾞ' : 'ﾟ'));
  }
}
const FULL_KANA = new RegExp(`[${[...kanaToHalf.keys()].join('')}]`, 'g');

export function toHankaku(text: string, kinds: Kinds = ALL): string {
  let s = text.replace(/[！-～]/g, (c) => {
    const half = String.fromCharCode(c.charCodeAt(0) - OFFSET);
    const use = isAlnum(half) ? kinds.alnum : kinds.symbol;
    return use ? half : c;
  });
  if (kinds.space) s = s.replace(/　/g, ' ');
  if (kinds.kana) s = s.replace(FULL_KANA, (c) => kanaToHalf.get(c)!);
  return s;
}

export function toZenkaku(text: string, kinds: Kinds = ALL): string {
  let s = text.replace(/[\x21-\x7e]/g, (c) => {
    const use = isAlnum(c) ? kinds.alnum : kinds.symbol;
    return use ? String.fromCharCode(c.charCodeAt(0) + OFFSET) : c;
  });
  if (kinds.space) s = s.replace(/ /g, '　');
  if (kinds.kana) {
    // 半角カナの並びを NFKC でまとめて全角にする（ｶﾞ → ガ）
    s = s.replace(/[｡-ﾟ]+/g, (run) =>
      run
        .normalize('NFKC')
        // くっつく相手のない濁点・半濁点は、結合文字のまま残さず ゛゜ にする
        .replace(/゙/g, '゛')
        .replace(/゚/g, '゜'),
    );
  }
  return s;
}

import { useId, useState } from 'react';
import { toHankaku, toZenkaku, type Kinds } from './zenhan';

const LABELS: Record<keyof Kinds, string> = {
  alnum: '英数字',
  symbol: '記号',
  kana: 'カタカナ',
  space: 'スペース',
};

export function ZenHanConverter({ defaultValue = '' }: { defaultValue?: string }) {
  const id = useId();
  const [text, setText] = useState(defaultValue);
  const [kinds, setKinds] = useState<Kinds>({ alnum: true, symbol: true, kana: true, space: true });
  const [message, setMessage] = useState('');

  const run = (convert: (s: string, k: Kinds) => string, label: string) => {
    const next = convert(text, kinds);
    setMessage(next === text ? `${label}にする文字はありませんでした` : `${label}にしました`);
    setText(next);
  };

  return (
    <div className="zenhan">
      <label htmlFor={id}>変換する文字</label>
      <textarea
        id={id}
        rows={3}
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          setMessage('');
        }}
      />
      <fieldset>
        <legend>変換する種類</legend>
        {(Object.keys(LABELS) as (keyof Kinds)[]).map((key) => (
          <label key={key}>
            <input
              type="checkbox"
              checked={kinds[key]}
              onChange={(e) => setKinds({ ...kinds, [key]: e.target.checked })}
            />
            {LABELS[key]}
          </label>
        ))}
      </fieldset>
      <div className="buttons">
        <button type="button" onClick={() => run(toZenkaku, '全角')}>全角にする</button>
        <button type="button" onClick={() => run(toHankaku, '半角')}>半角にする</button>
      </div>
      <output htmlFor={id} aria-live="polite">{message}</output>
    </div>
  );
}

.zenhan {
  display: grid;
  gap: 8px;
  max-width: 360px;
}
.zenhan textarea {
  font-size: 1.125rem;
  padding: 6px 8px;
}
.zenhan fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.zenhan .buttons {
  display: flex;
  gap: 8px;
}
.zenhan button {
  font-size: 1rem;
  padding: 6px 12px;
}
.zenhan output {
  min-height: 1.5em;
  color: #067a98;
}

import { useId, useState } from 'react';
import { toHankaku } from './zenhan';

// ハイフンに見える文字：‐ ‑ ‒ – — ―（U+2010〜U+2015）、−（U+2212）、ー（U+30FC）、ｰ（U+FF70）
const HYPHEN_LIKE = /[\u2010-\u2015\u2212\u30fc\uff70]/g;

// 英数字と記号だけ半角にし、ハイフンに見える文字を半角の「-」にそろえる
export function normalizePostalCode(value: string): string {
  return toHankaku(value, { alnum: true, symbol: true, kana: false, space: false })
    .replace(HYPHEN_LIKE, '-')
    .trim();
}

// 郵便番号の欄。欄を離れたときに、半角の数字と「-」にそろえる
export function PostalCodeInput() {
  const id = useId();
  const [value, setValue] = useState('');

  return (
    <div className="postal">
      <label htmlFor={id}>郵便番号</label>
      <input
        id={id}
        type="text"
        inputMode="numeric"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={() => setValue(normalizePostalCode(value))}
      />
    </div>
  );
}