kana

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