{{ 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) } } })