半角や全角を自動で変換できる検索機能を作りたいです

Question

前提・実現したいこと

■概要■
「スマホ」と入力したときに、「スマホ」「スマートフォン」「スマートホン」を表示したい。
さらに、「ｽﾏﾎ」という半角入力でも同様の表示をしたい。

■詳細■
JSONを辞書にして、入力ワードに合うものを検索結果として表示したいです。

具体的には、「入力値」と「JSONの"relation"」を比較して、一致したらその「JSONの"name"」を検索結果として表示する機能です。

そのときに半角や全角の変換もしたいのですが、その変換機能で次の問題に躓いてしまいました。

発生している問題・エラーメッセージ

・配列（searchArr）に、重複した値が作られてしまうこと。
・検索結果が表示できないこと。
が問題です。

どのようにすれば解決し、冒頭の実現したいことができるようになるでしょうか？

エラーなし

該当のソースコード

この「inputの入力値」と、「JSONの"relation"」を比較し、「ul」に「JSONの"name"」を表示したいという流れです。

<div class="searchBox">
  <input type="text">
</div>
<ul>ここに「JSONの"name"」を表示したい</ul>

試したソースコード

「JSONの"relation"」には正式名称と略語などが入っているので、
それと入力値を比較して、
一致したらその「JSONの"name"」を検索結果として表示する。
という機能のつもりで書いたのが下記のソースコードになります。

問題は入力値の変換機能です。

動作サンプル：https://jsfiddle.net/wq68f0ye/

/*
* 検索される辞書
***********************/
// 見やすく改行してますが、実際は改行なしです
var jsn = '[
{"id":1,"name":"スマホ","relation":"スマホ,スマートフォン,スマートホン"},
{"id":2,"name":"スマートフォン","relation":"スマホ,スマートフォン,スマートホン"},
{"id":3,"name":"スマートホン","relation":"スマホ,スマートフォン,スマートホン"},
{"id":4,"name":"USB","relation":"USB,Universal Serial Bus"},
{"id":5,"name":"Universal Serial Bus","relation":"USB,Universal Serial Bus"}
]';

var obj = JSON.parse(jsn);


/*
* 検索を実行
***********************/
$(document).on( 'input', '.searchBox input', function() {

	// 入力値を配列に
	const inp = $(this).val();
	const searchArr = inp.split(/[\u3000&\x20;]/g);
  
	// 入力値の配列を変換
	$.each(searchArr, function(i, v) {
		// 後述の関数で変換する
		hull2half(v) ? searchArr.push(hull2half(v)) : searchArr;
		half2full(v) ? searchArr.push(half2full(v)) : searchArr;
		hira2kata(v) ? searchArr.push(hira2kata(v)) : searchArr;
		kata2hira(v) ? searchArr.push(kata2hira(v)) : searchArr;
		halfkata2fullkata(v) ? searchArr.push(halfkata2fullkata(v)) : searchArr;
	});

	// チェック
	console.log(searchArr);
  
	// リストを表示
	let dispArr = [];
	if( inp.length ){ 
		// 検索結果を表示
		Object.values(obj).forEach(data=>{
			if( data['relation'].indexOf(searchArr) != -1 ){
				dispArr.push( '<li>' +data['name']+ '</li>' );
			}
		});
	}
	else{
		// 全て表示
		Object.values(obj).forEach(data=>{
			dispArr.push( '<li>' +data['name']+ '</li>' );
		});	
	}
	$( 'ul' ).html( dispArr );
});

そして以下が問題の、入力値の変換機能になります。これが上の「$.each」できちんと動作せず、問題が発生しているのだと思います。

/*
* 検索文字の変換関数たち
***********************/

// 全角英数を半角英数に変換
function hull2half(str) {
	if( str.match(/[Ａ-Ｚａ-ｚ０-９]/g) ){
		return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
			return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		});
	}
}

// 半角英数を全角英数に変換
function half2full(str) {
	if( str.match(/[A-Za-z0-9]/g) ){
		return str.replace(/[A-Za-z0-9]/g, function(s) {
			return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
		});
	}    
}

// ひらがなをカタカナに変換
function hira2kata(str) {
	if( str.match(/[ぁ-ん]/g) ){
		return str.replace(/[ぁ-ん]/g, function(s) {
			return String.fromCharCode(s.charCodeAt(0) + 0x60);
		});
	}       
}

// カタカナをひらがなに変換
function kata2hira(str) {
	if( str.match(/[ァ-ン]/g) ){
		return str.replace(/[ァ-ン]/g, function(s) {
			return String.fromCharCode(s.charCodeAt(0) - 0x60);
		});
	}     
}

// 半角カタカナを全角カタカナに変換
// 変換前
var beforeStr = new Array('ｧ','ｨ','ｩ','ｪ','ｫ','ｬ','ｭ','ｮ','ｯ','ｰ','ｳﾞ','ｶﾞ','ｷﾞ','ｸﾞ','ｹﾞ','ｺﾞ','ｻﾞ','ｼﾞ','ｽﾞ','ｾﾞ','ｿﾞ','ﾀﾞ','ﾁﾞ','ﾂﾞ','ﾃﾞ','ﾄﾞ','ﾊﾞ','ﾋﾞ','ﾌﾞ','ﾍﾞ','ﾎﾞ','ﾊﾟ','ﾋﾟ','ﾌﾟ','ﾍﾟ','ﾎﾟ','ｱ','ｲ','ｳ','ｴ','ｵ','ｶ','ｷ','ｸ','ｹ','ｺ','ｻ','ｼ','ｽ','ｾ','ｿ','ﾀ','ﾁ','ﾂ','ﾃ','ﾄ','ﾅ','ﾆ','ﾇ','ﾈ','ﾉ','ﾊ','ﾋ','ﾌ','ﾍ','ﾎ','ﾏ','ﾐ','ﾑ','ﾒ','ﾓ','ﾔ','ﾕ','ﾖ','ﾗ','ﾘ','ﾙ','ﾚ','ﾛ','ﾜ','ｦ','ﾝ');
// 変換後
var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン');
function halfkata2fullkata(str) {
	var fullStr = str;
	for(var i = 0; i < beforeStr.length; i++) {
		fullStr = fullStr.replace(new RegExp(beforeStr[i], 'g'), afterStr[i]);
	}
	return fullStr;
}

長くなってしまい申し訳ございませんが、どなたか解決できましたら宜しくお願い致します。

Answer 1

まず、提示コードの通りとすれば data['relation'] は文字列なのであらかじめ配列にしておいたほうがいいでしょう。
data'relation' と searchArr(配列) との積があるかどうかを調べたいのだと思いますが、そのようなメソッドはないので用意するかループを回すかです。
https://qiita.com/IgnorantCoder/items/f371b6542f1353376b06
https://qiita.com/toshihikoyanase/items/7b07ca6a94eb72164257

Comments

[DiningKitchen]

たしかに配列と配列の比較ですね。リンク先ありがとうございます。参考にさせて頂きます。

Answer 2

データの構造から見なおしたほうがいいと思います。
今だと、1つキーワードが増える度に複数箇所を直さないといけないですよね？
しかもキーワードが増える度に治す箇所が指数関数的に増えていくのでメンテできなくなります。

以下の構造が最善とは思ってませんが、少なくとも以下サンプルのようにしていくべきと思います。

• relationに元になるキーワードもわざと混ぜてます。
• words.relationを調べれば確認出来るようにする為。

let dic = [{
  "name": "UniversalSerialBus",
  "relation": [{
    "name": "UniversalSerialBus"
    }, {
      "name": "USB"
  }]
}, {
  "name": "スマートフォン",
  "relation": [{
    "name": "スマートフォン",
  },{
    "name": "スマホ"
  }, {
    "name": "スマートホン"
  }]
  }];

for (const words of dic) {
  console.log(words.relation);
}
//[ { name: 'UniversalSerialBus' }, { name: 'USB' } ] 
//[ { name: 'スマートフォン' }, { name: 'スマホ' }, { name: 'スマートホン' } ]

もっといい構造が集まるといいなぁ。