同音のひらがなとカタカナの組み合わせでできる文字列のパターンを作りたい

Question

inputタグに入力された文字列に応じてひらがなとカタカナの組み合わせでできる文字列のパターンを出力したいです。
例えば、かさという入力があった場合「かさ」「カサ」「かサ」「カさ」の4つが出力されるイメージです。

「カサ」→「かさ」や「かさ」→「カサ」は下記で作成できたのですが、「かサ」「カさ」といった混成パターンの作り方の検討がつかず質問させていただきました。

<input type="text" id="input">

$('#input').on('input', function(){
    var val = $(this).val();
    var kana = hiraToKana(val);
    var hira = kanaToHira(val);
    // ひらがな、カタカナの混成文字列を作る
})

function hiraToKana(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
        var chr = match.charCodeAt(0) + 0x60;
        return String.fromCharCode(chr);
    });
}

function kanaToHira(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
}

Answer 1

ひらがな、カタカナは２パターンなので、
文字数の二乗分まで二進数を生成して、
0か1かで一文字ずつひらがなとカタカナを判定しながら生成して連結する方法です。

追記
失礼しました。
0埋め用のサイズ指定が2で固定になっており、
かつパターンの数は文字数の2乗ではなく、2の文字数乗が正解でした。
修正した内容で試してみてください。

var val = "かさ";
// ひらがな、カタカナの混成文字列を作る
var retArray = [];

var len = val.length;
for (var i = 0; i < 2 ** len; i++) {
    var retStr = "";
    // 二進数文字の0埋め
    var zeroPadding = [...Array(len)].reduce((r, v) => r += "0", "");
    var bi = (zeroPadding + i.toString(2)).slice(-len);;
    for (var j = 0; j < len; j++) {
        var cbi = bi.charAt(j);
        if (cbi === "0") {
            retStr += kanaToHira(val.charAt(j));
        } else if (cbi === "1") {
            retStr += hiraToKana(val.charAt(j));
        }
    }
    retArray.push(retStr);
}
console.log(retArray);

function hiraToKana(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
        var chr = match.charCodeAt(0) + 0x60;
        return String.fromCharCode(chr);
    });
}

function kanaToHira(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
}

Comments

[raidomaru]

ご回答ありがとうございます。
2文字の時は想定通りの配列が作成できました。

3文字以上にすると想定外の結果となっていまいました。
よろしければ引き続きアドバイス頂けると助かります。

var val = "しゃつ"とした場合、しゃつが重複する
["しゃつ", "しゃツ", "しャつ", "しャツ", "シゃつ", "シゃツ", "シャつ", "シャツ", "しゃつ"]

var val = "かさたて"とした場合、3文字のものがある
 ["かさた", "かさタ", "かさタて", "かさタテ", "かサたて", "かサたテ", "かサタて", "かサタテ", "カさたて", "カさたテ", "カさタて", "カさタテ", "カサたて", "カサたテ", "カサタて", "カサタテ"]

[raidomaru]

ありがとうございます。
修正いただいたもので想定通りの動作確認できました。

Answer 2

混成パターンの作り方の検討がつかず

たとえば、ひらがなを 0に、カタカナを 1 に割り当てるなどして、２進数の処理を考えるだけでも取得できます。

var
  val ="かサ",
  len = val.length,
  ptn = val.split("").map(c=>[kanaToHira(c),hiraToKana(c)]),
  max = (l=>{
    let r = 0;
    while ( l-- ) {
      r = (r<<1)|1
    }
    return r
  })(len), // 最大インデックス値
  ret = Array.from({length:max+1}).map((v,i)=>
    i.toString(2).padStart(len,"0")
      .split("").map((n,i)=>ptn[i][n])
      .join("")
  )
;
console.log( ret );

1. あんぶれらだと 32パターン。
2. きほんじょうほうしょりだと 2048パターン。
3. きほんじょうほうしょりぎじゅつしゃだと 131072パターン（遅い）。

試してみるとわかりますが、文字数が増えると混成パターンの取得には時間がかかります。
尚、回答例ですので、ひらがな、カタカナ以外の文字がある場合の対応は考えていません。

Answer 3

こんにちは
ベストアンサー決定後に失礼します。

一文字入力されたり、バックスペースで一文字削除されたりするたびに、毎回、入力文字に含まれるひらがな、またはカタカナの文字数の２の累乗個の文字列を作り直すと時間がかかるので、現在表示中のリストを保持しておいて、ひらがなまたはカタカナが一文字入力されたら、表示中のリストの各文字列から、入力文字のひらがなとカタカナを追加した文字列を作る、というやり方を考えました。

$(function() {
  
  const isHira = code => 0x3041 <= code && code <= 0x3096; 
  const isKata = code => 0x30A1 <= code && code <= 0x30F6;   
        
  class KanaStrings {
    constructor() {
      this.input = '';
      this.list = [];
    }
    
    getChars(ch) {
      const code = ch.charCodeAt(0);
      if (isHira(code)) {
        return [String.fromCharCode(code), String.fromCharCode(code + 0x60)];
      } else if (isKata(code)) {
        return [String.fromCharCode(code - 0x60), String.fromCharCode(code)];
      } else {
        return [ch];
      }
    }
    
    add(ch) {
      const chars = this.getChars(ch);
      if (this.list.length === 0) {        
        this.list = chars;
      } else {
        if (chars.length === 1) {
          this.list = this.list.map(str => `${str}${chars[0]}`);  
        } else {
          this.list = this.list.map(
            str => [`${str}${chars[0]}`, `${str}${chars[1]}`]
          ).flat();
        }
      }  
    }

    remove() {
      const code = this.list[0].charCodeAt(this.list[0].length - 1);
      if (isHira(code) || isKata(code)) {
        this.list = this.list.filter((_, i) => i%2).map(str => str.substring(0, str.length - 1));
      }
      else {
        this.list = this.list.map(str => str.substring(0, str.length - 1));        
      } 
      if (this.list.length === 1 && this.list[0] === "") {
        this.list.splice(0)
      }
    }
    
    set(val) {
      if (val.length >= this.input.length) {
        let pos = -1;
        for (let i=0; i < val.length; ++ i) {
          if (val[i] !== this.input[i]) {
            pos = i;
            break;
          }            
        }
        if (pos >= 0) {
          const rmStr = this.input.substring(pos);                    
          if (rmStr) {
            [...rmStr].forEach(_ => this.remove());
          }          
          const addStr = val.substring(pos);
          if (addStr) {
            [...addStr].forEach(ch => this.add(ch));
          }          
        }                  
      } else {
        this.remove();
      }
      this.input = val;   
      return this;
    }
  }
  
  
  const kanaStrings = new KanaStrings();
  
  $('#input').on('input', function(){
    const val = $(this).val();
    const items = kanaStrings.set(val).list.map((str, i) => `<li>${str}</li>`);
    $('#result').empty().append(items);
  });
    
});

• 動作確認用 CodePen: https://codepen.io/jun68ykt/pen/VwaegBz?editors=0010

・ひらがな、またはカタカナ以外の文字が入力されても、意図通り動くようになっていると思われます。
・カーソルが入力文字列の末尾にある状態で、バックスペースを押して一文字消すと、リスト内容も対応します。
・カーソルが入力文字列の末尾ではない場所にある状態で、バックスペースを押した場合の未対応対です。

以上、参考になれば幸いです。

Answer 4

総当り用の関数を一つ作ればよいのでは?

<script>
$(function(){
  $('#input').on('input', function(){
    var val = $(this).val();
    var moji=val.split("");
    var data=moji.map(x=>$.unique([hiraToKana(x),kanaToHira(x)]));
    var r=soatari(data);
    console.log(r);
  });
});
function soatari(data){
  var res=[];
  if(data.length>0 && data instanceof Array){
    if(data.length==1){
      res=(data[0] instanceof Array)?data:[data];
    }else{
      if(!(data[0] instanceof Array)) data[0]=[data[0]];
      if(!(data[1] instanceof Array)) data[1]=[data[1]];
      for(i of data[0]) for(j of data[1]) res.push(i+j);
      res=[res].concat(data.slice(2));
      if(typeof data[2]!=="undefined") res=soatari(res);
    }
  }
  return [1,2].includes(data.length)?res[0]:res;
}
function hiraToKana(str) {
  return str.replace(/[\u3041-\u3096]/g, function(match) {
    var chr = match.charCodeAt(0) + 0x60;
    return String.fromCharCode(chr);
  });
}

function kanaToHira(str) {
  return str.replace(/[\u30a1-\u30f6]/g, function(match) {
    var chr = match.charCodeAt(0) - 0x60;
    return String.fromCharCode(chr);
  });
}
</script>
<input type="text" id="input">