jQueryで配列の語句を前方一致させたい

Question

実現したいこと

こんにちは。恐らく初歩中の初歩のような質問になりますがよろしくお願いいたします。
配列に記入した語句をもとにhtmlの内容を絞り込みたいのですが、
前方一致させたいものが部分一致のものと混ざってしまい困っています。

javascriptやhtmlの元データは前回同様こちらを参考にしています。
また、lodash.jsが必要になります。

発生している問題

var Lists= [
 { name: 'あいうえお', hobby: [['趣味１', '30', 'あいうえお'], ['趣味２', '20', 'いうええ'], ['趣味３', '40', 'うえお']]},
 { name: 'かきくけこ', hobby: [['趣味１', '50', 'かいう'], ['趣味２', '30', 'うえこあいうえお'], ['趣味３', '40', 'くあい'], ['趣味４', '40', 'けえこ']]}
 { name: 'さしすせそ', hobby: [['趣味１', '20', 'いうさ'], ['趣味２', '40', 'しかい']]}
];

のような配列がある時にhtml側のドロップダウンリストを使って絞り込みをしたいのですが、今までは

function filterBydesc(value) {
    return (value == "") ? _.constant(true) : function(item) {
      　var ranges = {
                1: {desc: "いう"},
                2: {desc: "うえ"},
                3: {desc: "かい"},
           };
    	var range = ranges[value];
      	return _.some(range, function(descword) {
			return _.some(item.desc, function(word) {
				　return _.includes(word, descword);
						});
                  });
	        	};
    }

のように記述することで、その語句を含む人物を取り出すことができました。
しかし、絞り込みの条件を考える中でどうしても「あいうえお」で始まる人のみ絞り込みたくなったのですが
そのままだと「うえこあいうえお」を持つかきくけこさんも結果に表示されてしまいます。

試したこと

前方一致の正規表現というものを知ったので

                4: {desc: ^"あいうえお"},
                4: {desc: "^あいうえお"},
                4: {desc: ^あいうえお\},

上記の式にこの3パターンをそれぞれ付け足して試してみましたが
一番上はエラーとなり表示されず、二番目と三番目は「当てはまる人物は0名です」となりました。
そこで

function filterBydesc2(value) {
	return (value == "") ? _.constant(true) : function(item) {
	  　var ranges = {
				1: {desc: "あいうえお"},
		};
    	var range = ranges[value];
			return _.some(range, function(descword) {
			return _.some(item.desc, function(word) {
					if (word.indexOf(descword) === 0){
					　return _.includes(word, descword);
							};
				　　	}); 
　　　　			});
	　　　　　	};
	}

と別個に関数を作成したところ、きちんとあいうえおさんのみ表示してくれました。
しかし１つのドロップダウンを変更した時にどちらの絞り込みもしたいので、
どうにか上の関数にこの表現を入れ込めないかと最初の「filterBydesc」の関数内に
カッコを入れ替えたりしてペーストしてみたのですが思うように動きません。

最初の関数内に前方一致の条件も付け加えることは可能でしょうか。
教えていただきたく思います。よろしくお願いいたします。

Answer 1

最初の関数内に文頭一致の条件も付け加えることは可能でしょうか。

startsWith
https://lodash.com/docs/4.17.4#startsWith

「文頭一致」は前方一致が正しいですね。

Re: toramo さん

Comments

[toramo]

回答ありがとうございます。
前方一致ですね。不勉強で申し訳ないです。本文を修正しました。

startsWithの項目を読みました。
恐らく、前方一致させたい配列をもう一つvar ranges2などにして表記した上で
if文で0文字目からstartsWithしてたらranges2の方の式、elseでrangeの式とすれば
一つの関数内で収まるんだろうな、というぼんやりとした道筋は分かりました。
ただ、申し訳ないのですがその関数を正しく表記できる力がまだ無かったため、
今回は別の方の関数をそのまま使わせていただきました。
しかし今後似たような場面に遭遇した際にこのstartsWithも使いこなせるように精進します。
お手数おかけしました。

Answer 2

Answer書き直しました。

const _ = require('lodash')

function filterBydesc (value) {
  return value == ''
    ? _.constant(true)
    : function (item) {
      var ranges = {
        1: { desc: 'いう' },
        2: { desc: 'うえ' },
        3: { desc: 'かい' },
        4: { desc: '^あい' } // <---- 条件追加しました。
      }
      var range = ranges[value]
      return _.some(range, function (descword) {
        return _.some(item.desc, function (word) {
          return !!word.match(descword) // <---- ここを書き換えました。
        })
      })
    }
}

/* 動作確認用 */
console.log(filterBydesc('1')({ desc: { word: 'あいうえお' } })) // true
console.log(filterBydesc('2')({ desc: { word: 'あいうえお' } })) // true
console.log(filterBydesc('3')({ desc: { word: 'あいうえお' } })) // false

/* 本題 */
console.log(filterBydesc('4')({ desc: { word: 'あいうえお' } }))    // true
console.log(filterBydesc('4')({ desc: { word: '___あいうえお' } })) // false

_.includes('foobar', 'foo')は単に true　か false を返すので、このケースでは lodash にこだわる必要なさそうでした。
'foobar'.match('^foo')とすると正規表現込みのマッチングが行われるので、これを使うと良いと思います。

'foobar'.match('^foo')     // [ 'foo', index: 0, input: 'foobar' ]
'___foobar'.match('^foo')  // null

このままだと返す値が若干怪しいので、!!を適用して true か false にしてから返すと良いと思いました。

!!'foobar'.match('^foo')     // true
!!'___foobar'.match('^foo')  // false

Comments

[toramo]

回答ありがとうございます。
こちらの式に変更しても、正しく動作することができました。
しかし、この条件に加えて
「1: {desc: "いう"},
2: {desc: "うえ"},
3: {desc: "かい"},」
などの部分一致の条件を同時に成立させたいのです。
説明不足で申し訳ありません。

[set0gut1]

「nameで前方一致し、かつdescで部分一致させるレコードを探す」ということでしょうか？

[toramo]

何度も有難うございます。こちらの表現不足でお手を煩わせてしまいすみません。
1〜4のdescが同じ変数内に配列として並んでいるときに、
1・2・3のdescは部分一致させ、4の「あいうえお」というdescのみ前方一致させたい、という意味で質問させていただきました。
なんとなく、同じ変数内では出来ないのでは？と考え
123と4の配列をそれぞれ別の変数として定義して、
上の方に教えていただいたstartsWithを絡めたif文を作ればいいのではないかと思ったのですが
（全くの素人考えのためズレていたらすみません）
その構文が正しく書けないため手詰まっています。

[set0gut1]

把握しました！Answer修正しようと思います。

[toramo]

有難うございました！
修正していただいた回答のお陰で、無事に前方一致させることが出来ました！
ドロップダウンを変更して正しい人数に絞り込めたのを見た時に本当にホッとしました。
教えていただいた表現を自分で調べながら学んでみようと思います。
今回は大変お世話になりました。

[set0gut1]

おめでとうございます！