
全角かな or カナを半角カナに変換する【JS】
2018-12-2810 min read
目次
概要
全角かなもしくは全角カナを半角カナに変換するサンプルコードとデモを紹介します。
デモ
サンプルコード
HTML
<div>
<div>
<div>
<div>
<label>input</label>
<textarea id="src"></textarea>
<label>output</label>
<textarea id="dst"></textarea>
<div>
<button id="run">run</button>
</div>
<select id="kana-type">
<option value="all" selected>全て変換</option>
<option value="hiragana">かなのみ変換</option>
<option value="katakana">カナのみ変換</option>
</select>
</div>
</div>
</div>
</div>
JS
const KANA = {
"normal": {
"src": {
"hiragana":"あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんぁぃぅぇぉヵヶっゃゅょゎ。、「」ー",
"katakana":"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォヵヶッャュョヮ。、「」ー",
},
"dst": "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォヵヶッャュョワ。、「」-",
"suffix" : ""
},
"dakuon": {
"src" : {
"hiragana": "がぎぐげござじずぜぞだぢづでどばびぶべぼゔ",
"katakana": "ガギグゲゴザジズゼゾダヂヅデドバビブベボヴ",
},
"dst":"カキクケコサシスセソタチツテトハヒフヘホウ",
"suffix" : "゙"
},
"handakuon": {
"src": {
"hiragana": "ぱぴぷぺぽ",
"katakana": "パピプペポ",
},
"dst" : "ハヒフヘホ",
"suffix" : "゚"
}
};
document.getElementById("run").addEventListener("click", (e) => {
var input = document.getElementById("src")
var output = document.getElementById("dst")
var type = document.getElementById("kana-type")
output.value = ""
var zenkaku = []
var hankaku = []
for (var key1 in KANA) {
var src = KANA[key1].src
var dst = KANA[key1].dst
var suffix = ""
if (KANA[key1].suffix) {
suffix = KANA[key1].suffix
}
for (var key2 in src) {
if (type.value === "all" || key2 === type.value) {
var row = src[key2]
for (var j = 0; j < row.length; j++) {
zenkaku.push(row[j] + suffix)
hankaku.push(dst[j] + suffix)
}
}
}
}
input.value.split("").forEach((e) => {
for (var i = 0; i < zenkaku.length; i++) {
if (zenkaku[i] == e) {
output.value += hankaku[i]
return
}
}
output.value += e
})
})
Recommends
Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
2020-03-23
MonacoEditor + Vue を使ってエディタを実装
2019-06-23
async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-23
JavaScriptで画像のヒストグラムの正規化
2019-06-10
画像のヒストグラムを表示する Chart.js JavaScript canvas
2019-05-26
画像のプーリング処理 canvas + JavaScript
2019-05-19
JSで画像をまとめて読み込む(プリロードする)
2019-05-06
画像にモザイクをかける JavaScript canvas デモあり
2019-01-24
回転ルーレットを作る JavaScript + canvas
2019-01-17
文字列のAAを自動生成 デモ + サンプルコード JavaScript
2019-01-03
全角かな or カナを半角カナに変換する【JS】
2018-12-28
canvas上のマウス座標を取得する。【JS】
2018-12-26
JavaScript + canvasで砂嵐を描画する サンプルコード
2018-12-12
csvをmarkdownのテーブル & HTMLに変換するスクリプト
2018-11-18
mavonEditor と Vue.js で作るMarkdownエディタのデモ + API...
2018-10-14
New Posts
[AWS CDK]ECS FargateでNestJSで作成したRESTfull APIデ...
2022-05-24
[AWS CDK]S3 CloudFront OAI Route53 構成 で NextJ...
2022-05-23
[CDK]SNS+SQS+DynamoDBでBounceとComplaint情報を収集する...
2022-04-11
[AmazonSES] node.js と ejs を利用してEメールを送信する
2022-04-09
GatsbyからNext.jsへのサイト移行
2022-04-04
[AWS CDK] Lambda で S3 オブジェクトを読み書きするStackの構築
2022-03-18
[AWS CDK] S3 + CloudFrontの構築とOriginAccessIden...
2022-03-09
[AWS CDK] Bastion(踏み台)構築。SSMとEC2InstanceConne...
2022-03-06
[AWS CDK] Cognito を構築
2022-03-04
AWS CDK v2 でVPC上にAPI Gateway + Lambda + RDS +...
2022-02-28
javascriptで累積和を解く
2022-02-27
AWS Amplify で monorepo を導入し 単一リポジトリで複数プロジェクトを...
2022-02-25
AWS CDK v2 で Lambda関数のデプロイ
2022-02-23
NextJSでDevToysのようなものを作成した
2022-02-22
JSで動的計画法を利用して部分和問題を解く
2022-02-20
Hot posts!
Proxy環境下でcurlを実行する
2019-12-07
OpenCVのMatのタイプ一覧表
2018-11-25
Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
2019-12-21
TablePlusを使ってみる。シンプルでモダンなSQLクライアントツール
2018-09-30
DBクライアントツールはDBeaverをおすすめしたい
2021-03-08
AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成
2019-06-12
AtCoderで初めて色がつくまでの話(茶色) レートが中々上がらなかった原因
2018-11-25
CentOS8でEPELとPowerToolsリポジトリの有効化
2020-11-30
Macでターミナルからポートスキャンを行う方法。
2018-12-09
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する
2018-11-27
Date
▶︎
2022 年 (23)
▶︎
2021 年 (40)
▶︎
2020 年 (30)
▶︎
2019 年 (90)
▶︎
2018 年 (89)
▶︎
2017 年 (1)
Tags
Author