»Javascriptで文字列を半角に!英数字・カタカナ・記号対応


モバイルのお仕事をしていたりすると何かと半角にする必要があったりします。
PHPだとmb_convert_kana()っていう関数が用意されていて簡単なのですが、Javascriptではすべてを置換してやる必要がありますよね。
書くの面倒だなぁとか、そもそもやり方がわからんとか、そんな人は是非下記のコードを利用してください。

テキストエリアに入力された文字列を半角にする

Javascriptには

//入力するテキストエリアのid
var inputId = "input";
//出力するテキストエリアのid
var outputId = "output";
function replaceText(){
	//テキストを格納する変数を作成
	repText = "";
	//テキストエリアの文字列を取得
	var repText = document.getElementById(inputId).value;
	// 半角文字を配列に格納
	var hankaku = [
	"1", "2" , "3", "4", "5", "6", "7", "8", "9", "0",
	"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
	"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
	"ヴ","ア", "イ", "ウ", "エ", "オ", "ァ", "ィ", "ゥ", "ェ", "ォ",
	"ガ", "ギ", "グ", "ゲ", "ゴ","カ", "キ", "ク", "ケ", "コ",
	"ザ", "ジ", "ズ", "ゼ", "ゾ","サ", "シ", "ス", "セ", "ソ",
	"ダ", "ヂ", "ヅ", "デ", "ド","タ", "チ", "ツ", "テ", "ト", "ッ",
	"ナ", "ニ", "ヌ", "ネ", "ノ",
	"バ", "ビ", "ブ", "ベ", "ボ", "パ", "ピ", "プ", "ペ", "ポ","ハ", "ヒ", "フ", "ヘ", "ホ",
	"マ", "ミ", "ム", "メ", "モ",
	"ヤ", "ユ", "ヨ", "ャ", "ュ", "ョ",
	"ラ", "リ", "ル", "レ", "ロ",
	"ワ", "ヲ", "ン",
	"!", "\"", "#", "$", "%", "&", "'", "(", ")", "=", "~", "|", "`", "{", "+", "*", "}", "<", ">", "?", "_",
	"ー", "-", "^", "\\", "@", "「", ";", ":", "」", "、", "。", "・", "[", "]", "゚", "゙", "/", ".", " "];
	// 全角文字を配列に格納
	var zenkaku  = [
	"1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
	"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
	"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
	"ヴ", "ア", "イ", "ウ", "エ", "オ", "ァ", "ィ", "ゥ", "ェ", "ォ",
	"ガ", "ギ", "グ", "ゲ", "ゴ", "カ", "キ", "ク", "ケ", "コ",
	"ザ", "ジ", "ズ", "ゼ", "ゾ", "サ", "シ", "ス", "セ", "ソ",
	"ダ", "ヂ", "ヅ", "デ", "ド", "タ", "チ", "ツ", "テ", "ト", "ッ",
	"ナ", "ニ", "ヌ", "ネ", "ノ",
	"バ", "ビ", "ブ", "ベ", "ボ", "パ", "ピ", "プ", "ペ", "ポ" ,"ハ", "ヒ", "フ", "ヘ", "ホ",
	"マ", "ミ", "ム", "メ", "モ",
	"ヤ", "ユ", "ヨ", "ャ", "ュ", "ョ",
	"ラ", "リ", "ル", "レ", "ロ",
	"ワ", "ヲ", "ン",
	"!", "”", "#", "$", "%", "&", "'", "(", ")", "=", "~", "|", "'", "{", "+", "*", "}", "<", ">", "?", "_",
	"ー", "-", "^", "¥", "@", "「", ";", ":", "」", "、", "。", "・", "[", "]", "゜", "゛", "/", ".", " "];
	//文字列をすべて置換
	for (i=0; i<=hankaku.length; i++) {
		while (repText.indexOf(zenkaku[i]) >= 0){
			repText= repText.replace(zenkaku[i], hankaku[i]);
		}
	}
	//テキストエリアに置換された文字列を書き出し
	document.getElementById(outputId).value = repText;
}

HTMLには

<textarea id="input"></textarea>
	<button onClick="replaceText()">半角にする!</button>
<textarea id="output"></textarea>

とこんな感じで書いてあげましょう。
これを応用したものをweb appsにアプリ化してありますので、是非ご利用ください!

文字数カウント/変換ツール

公開日: 2013年1月24日 0:00 | カテゴリー: HTML, JavaScript | タグ: , ,

コメント