{{ str | kana }}
{{ str | kana(1) }}
<div id="app">
<p><input v-model="str"></p>
<p>{{ str | kana }}</p>
<p>{{ str | kana(1) }}</p>
</div>
new Vue({
el: '#app',
data: {
str: 'ハローワールド'
},
filters: {
kana(str, n) {
if (!str) return str
const inverseObject = (obj, keyIsNumber) => {
return Object.keys(obj).reduceRight((ret, k) => {
return (ret[obj[k]] = keyIsNumber ? parseInt(k, 10) : k, ret);
}, {});
}
let henkanObj = {"\u30a2":"\uff71","\u30a4":"\uff72","\u30a6":"\uff73","\u30a8":"\uff74","\u30aa":"\uff75","\u30ab":"\uff76","\u30ad":"\uff77","\u30af":"\uff78","\u30b1":"\uff79","\u30b3":"\uff7a","\u30b5":"\uff7b","\u30b7":"\uff7c","\u30b9":"\uff7d","\u30bb":"\uff7e","\u30bd":"\uff7f","\u30bf":"\uff80","\u30c1":"\uff81","\u30c4":"\uff82","\u30c6":"\uff83","\u30c8":"\uff84","\u30ca":"\uff85","\u30cb":"\uff86","\u30cc":"\uff87","\u30cd":"\uff88","\u30ce":"\uff89","\u30cf":"\uff8a","\u30d2":"\uff8b","\u30d5":"\uff8c",
"\u30d8":"\uff8d","\u30db":"\uff8e","\u30de":"\uff8f","\u30df":"\uff90","\u30e0":"\uff91","\u30e1":"\uff92","\u30e2":"\uff93","\u30e4":"\uff94","\u30e6":"\uff95","\u30e8":"\uff96","\u30e9":"\uff97","\u30ea":"\uff98","\u30eb":"\uff99","\u30ec":"\uff9a","\u30ed":"\uff9b","\u30ef":"\uff9c","\u30f2":"\uff66","\u30f3":"\uff9d","\u30a1":"\uff67","\u30a3":"\uff68","\u30a5":"\uff69","\u30a7":"\uff6a","\u30a9":"\uff6b","\u30c3":"\uff6f","\u30e3":"\uff6c","\u30e5":"\uff6d","\u30e7":"\uff6e","\u30ac":"\uff76\uff9e",
"\u30ae":"\uff77\uff9e","\u30b0":"\uff78\uff9e","\u30b2":"\uff79\uff9e","\u30b4":"\uff7a\uff9e","\u30b6":"\uff7b\uff9e","\u30b8":"\uff7c\uff9e","\u30ba":"\uff7d\uff9e","\u30bc":"\uff7e\uff9e","\u30be":"\uff7f\uff9e","\u30c0":"\uff80\uff9e","\u30c2":"\uff81\uff9e","\u30c5":"\uff82\uff9e","\u30c7":"\uff83\uff9e","\u30c9":"\uff84\uff9e","\u30d0":"\uff8a\uff9e","\u30d3":"\uff8b\uff9e","\u30d6":"\uff8c\uff9e","\u30d9":"\uff8d\uff9e","\u30dc":"\uff8e\uff9e","\u30d1":"\uff8a\uff9f","\u30d4":"\uff8b\uff9f",
"\u30d7":"\uff8c\uff9f","\u30da":"\uff8d\uff9f","\u30dd":"\uff8e\uff9f","\u30f4":"\uff73\uff9e","\u30f7":"\uff9c\uff9e","\u30fa":"\uff66\uff9e","\u3002":"\uff61","\u3001":"\uff64","\u30fc":"\uff70","\u300c":"\uff62","\u300d":"\uff63","\u30fb":"\uff65","\u309b":"\uff9e","\u309c":"\uff9f"};
const h2z = str => {
const reg = new RegExp('(' + Object.keys(henkanObj).join('|') + ')', 'g');
return str.replace(reg, match => {
return henkanObj[match];
});
};
const z2h = str => {
const k = inverseObject(henkanObj);
const reg = new RegExp('(' + Object.keys(k).join('|') + ')', 'g');
return str.replace(reg, match => {
return k[match];
});
};
return n ? h2z(str) : z2h(str)
}
}
})