javascriptで全角かな・カナを半角ｶﾅに変換するには

Question

全角文字から半角文字に変換する関数として

$("#id名").keydown(function () {
        var str = $(this).val();
        str = str.replace(/[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function (s) {
            return String.fromCharCode(s.charCodeAt(0) - 65248);
        });
        $(this).val(str);
    }).change();

と作成してみました。
これに追加する機能としてさらに、全角かな文字、全角カナ文字を「半角ｶﾅ」文字に変換するようにしたく思います。
どのようにしたらできますでしょうか？
どなたかご教授を宜しくお願いします。

Comments

[yambejp]

IE対応？ソースがUTF8じゃないときどうするつもりでしょうか？

[maisumakun]

> ソースがUTF8じゃないときどうするつもりでしょうか？

JavaScriptの文字列は常にUTF-16です。

Answer 1

どのようにしたらできますでしょうか？

かな文字1つ1つに対して、半角カナとの対応表を書く必要があるかと思います。特に、濁点・半濁点は半角カナでは1文字なので、全角のかな文字1文字に対して半角カナが2文字になることもあります。

なお、逆に「半角カナを全角カナにする」場合は、String.prototype.normalizeを使うことで可能です（Qiita）。

Answer 2

class ZenToHan {
	dictionary = {
		"ガ":"ｶﾞ",
		"ギ":"ｷﾞ",
		"グ":"ｸﾞ",
		"ゲ":"ｹﾞ",
		"ゴ":"ｺﾞ",
		"ザ":"ｻﾞ",
		"ジ":"ｼﾞ",
		"ズ":"ｽﾞ",
		"ゼ":"ｾﾞ",
		"ゾ":"ｿﾞ",
		"ダ":"ﾀﾞ",
		"ヂ":"ﾁﾞ",
		"ヅ":"ﾂﾞ",
		"デ":"ﾃﾞ",
		"ド":"ﾄﾞ",
		"バ":"ﾊﾞ",
		"ビ":"ﾋﾞ",
		"ブ":"ﾌﾞ",
		"ベ":"ﾍﾞ",
		"ボ":"ﾎﾞ",
		"ヴ":"ｳﾞ",
		"ヷ":"ﾜﾞ",
		"ヺ":"ｦﾞ",
		"パ":"ﾊﾟ",
		"ピ":"ﾋﾟ",
		"プ":"ﾌﾟ",
		"ペ":"ﾍﾟ",
		"ポ":"ﾎﾟ",
		"ガ":"ｶﾞ",
		"ギ":"ｷﾞ",
		"グ":"ｸﾞ",
		"ゲ":"ｹﾞ",
		"ゴ":"ｺﾞ",
		"ザ":"ｻﾞ",
		"ジ":"ｼﾞ",
		"ズ":"ｽﾞ",
		"ゼ":"ｾﾞ",
		"ゾ":"ｿﾞ",
		"ダ":"ﾀﾞ",
		"ヂ":"ﾁﾞ",
		"ヅ":"ﾂﾞ",
		"デ":"ﾃﾞ",
		"ド":"ﾄﾞ",
		"バ":"ﾊﾞ",
		"ビ":"ﾋﾞ",
		"ブ":"ﾌﾞ",
		"ベ":"ﾍﾞ",
		"ボ":"ﾎﾞ",
		"ヴ":"ｳﾞ",
		"ヷ":"ﾜﾞ",
		"ヺ":"ｦﾞ",
		"パ":"ﾊﾟ",
		"ピ":"ﾋﾟ",
		"プ":"ﾌﾟ",
		"ペ":"ﾍﾟ",
		"ポ":"ﾎﾟ",
		"。":"｡",
		"「":"｢",
		"」":"｣",
		"、":"､",
		"・":"･",
		"ヲ":"ｦ",
		"ァ":"ｧ",
		"ィ":"ｨ",
		"ゥ":"ｩ",
		"ェ":"ｪ",
		"ォ":"ｫ",
		"ャ":"ｬ",
		"ュ":"ｭ",
		"ョ":"ｮ",
		"ッ":"ｯ",
		"ー":"ｰ",
		"ア":"ｱ",
		"イ":"ｲ",
		"ウ":"ｳ",
		"エ":"ｴ",
		"オ":"ｵ",
		"カ":"ｶ",
		"キ":"ｷ",
		"ク":"ｸ",
		"ケ":"ｹ",
		"コ":"ｺ",
		"サ":"ｻ",
		"シ":"ｼ",
		"ス":"ｽ",
		"セ":"ｾ",
		"ソ":"ｿ",
		"タ":"ﾀ",
		"チ":"ﾁ",
		"ツ":"ﾂ",
		"テ":"ﾃ",
		"ト":"ﾄ",
		"ナ":"ﾅ",
		"ニ":"ﾆ",
		"ヌ":"ﾇ",
		"ネ":"ﾈ",
		"ノ":"ﾉ",
		"ハ":"ﾊ",
		"ヒ":"ﾋ",
		"フ":"ﾌ",
		"ヘ":"ﾍ",
		"ホ":"ﾎ",
		"マ":"ﾏ",
		"ミ":"ﾐ",
		"ム":"ﾑ",
		"メ":"ﾒ",
		"モ":"ﾓ",
		"ヤ":"ﾔ",
		"ユ":"ﾕ",
		"ヨ":"ﾖ",
		"ラ":"ﾗ",
		"リ":"ﾘ",
		"ル":"ﾙ",
		"レ":"ﾚ",
		"ロ":"ﾛ",
		"ワ":"ﾜ",
		"ン":"ﾝ",
	};

	convert = function (string) {
		if (typeof string !== "string") {
			throw `Argument "${string}" is invalid.`;
		}
		if (this.zenRegExp == null) {
			this.zenRegExp = new RegExp(Object.keys(this.dictionary).join("|"), "g");
		}
		return string.replace(this.zenRegExp, a => {
			return this.dictionary[a];
		});
	};
}

class HanToZen extends ZenToHan {
	constructor() {
		super();
		const entries = Object.entries(this.dictionary).filter(([key, value]) => !key.includes("\u{3099}"));
		this.dictionary = {};
		for (const [key, value] of entries) {
			this.dictionary[value] = key;
		}
	}
}

次のように使います。

const zenToHan = new ZenToHan();
zenToHan.convert("雨ニモ負ケズ風ニモ負ケズ雪ニモ夏ノ暑サニモ負ケズ");

濁音・半濁音が二回ずつ含まれているのは間違いではなく、二種類あるからです。
たとえば
「ガ」は U+30AB U+3099 ですが、「ガ」は U+30AC です。

またこれはすべてのカナに対応していません。たとえば「ヸ」は半角に含まれていないために対応できません。鼻濁音の「カ゚」やアイヌ語の「ト゚」も省いていますので、好みによって追加してください。根性があるなら、アルファベットなど他の文字も辞書に含めれば一度に変換できますが、次のように二回に分けて変換しても良いと思います。

str = zenToHan.convert(str.replace(/[Ａ-Ｚａ-ｚ０-９－！”＃＄％＆’（）＝＜＞，．？＿［］｛｝＠＾～￥]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
}));

hanToZen はその逆に半角カナを全角カナに直します。string.prototype.normalize と違って、半角カナのみを対象にします。

Answer 3

まず前提として、半角カナはASCII範囲の文字のように単純な文字コードの加減算では変換できませんので、変換表を作るのは避けられません。
変換表を使った変換方法はZuishinさんのコードがよいと思います。
ただ、String.prototype.normalizeを"NFD"で使えば1文字の(半)濁音を清音文字と(半)濁点にばらすまではできますので、変換表が単独の濁点半濁点と清音のみで済み少しすっきりします。
濁点と半濁点はU+3099「 ゙ 」とU+309A「 ゚ 」です。
また全角ひらがなから全角カタカナへの変換は、文字コードを+0x60で容易に可能です。

ところでお示しのコードは「”」「’」「￥」が正しく変換できません。