【JavaScript】全角を2文字・半角を1文字としてカウントする方法｜表示幅の正しい数え方とバイト数・文字数との違い

function getWidth(str) {
  let width = 0;
  for (const ch of str) { // for...of はコードポイント単位（サロゲートペア安全）
    // 半角 = ASCII/Latin-1(U+0000-U+00FF) と 半角カナ(U+FF61-U+FF9F)
    width += /[\x00-\xFF\uFF61-\uFF9F]/.test(ch) ? 1 : 2;
  }
  return width;
}

console.log(getWidth("あいうえおABCDE")); // 15（全角5×2 + 半角5×1）
console.log(getWidth("Hello"));          // 5
console.log(getWidth("ﾊﾝｶｸ"));           // 4（半角カナは1）

function countWidth(str) {
  // 全角 = 半角の範囲に当てはまらない文字
  const fullWidthCount = (str.match(/[^\x00-\xFF\uFF61-\uFF9F]/g) || []).length;
  // 体感文字数（コードポイント数）+ 全角の数だけ +1
  return [...str].length + fullWidthCount;
}

console.log(countWidth("あいうえおABCDE")); // 15

const s = "あA";

console.log([...s].length);                       // 2（体感文字数：全角も半角も1）
console.log(getWidth(s));                          // 3（全角2/半角1：表示幅）
console.log(new TextEncoder().encode(s).length);   // 4（UTF-8バイト数：全角3/半角1）

console.log(getWidth("\u{1F389}A")); // 3（絵文字=2 + 半角A=1）

// もし旧コードのように str.length で回すと…
console.log("\u{1F389}".length);     // 2（サロゲートペアで2単位）→ 二重カウントの原因

const input = document.getElementById("comment");
const counter = document.getElementById("counter");
const MAX = 400; // 半角換算の上限（全角なら200文字）

input.addEventListener("input", () => {
  const w = getWidth(input.value);
  counter.textContent = `${w} / ${MAX}`;
  counter.style.color = w > MAX ? "red" : "#333";
});