部分一致判別について

Question

何をしたい

htmlに記載されたテキストをスクリプト側で判別しクラスを追加したい。
配列keywordとhtmlのテキストを比較し、イコールの場合、active1~3までのクラスを追加したいのですが、
完全一致である「りんご」「みかん」は「active1、active2」が当たるのですが、部分一致である
「冬みかん」「夏みかん」「紅鮭」はあたりません。
result2でmatchで部分一致させているつもりなのですが、result3で比較すると-1が帰ってきています。
部分一致のやり方がちがうのでしょうか？

htmlコード

<div class="box">
<p class="txt">りんご</p>
</div>

<div class="box">
<p class="txt">冬みかん</p>
</div>

<div class="box">
<p class="txt">みかん</p>
</div>

<div class="box">
<p class="txt">夏みかん</p>
</div>

<div class="box">
<p class="txt">紅鮭</p>
</div>

$(function() {
	var c = ['active1','active2','active3']
	var keyword = ['りんご','みかん','鮭']
	var matchtxt = keyword.join('|');

	$('.txt').each(function() {
	var txt1 = $(this).text();
	console.log("txt1:"+ txt1)
	
	var result = $.inArray(txt1, keyword);
	var result2 = txt1.match(matchtxt);
	var result3 = $.inArray(result2, keyword);

	console.log("result"+result)
	console.log("result2"+result2)
	console.log("result3"+result3)

		if(result > -1){
		$(this).attr('class',c[result]);;
		}
	});

	});

Comments

[iwamot]

console.log("result2"+result2) の結果を追記していただくことは可能でしょうか。

[kerofu1977]

ありがとうございます。各console.logの出力は下記となります。
■リンゴのeachの結果
txt1:りんご
result:0
result2:りんご
result3:-1
※少々見やすくするために「:」を追加しました。

[iwamot]

ありがとうございます。文字列と結合せず、console.log(result2); にすると、意外な結果にならないでしょうか。

[kerofu1977]

console.log(result2)
にした結果は下記です。

["りんご", index: 0, input: "りんご", groups: undefined]

⇒「result2 = txt1.match(matchtxt);」は文字列を返しているわけではないといことでしょうか

[miyabi_pudding]

matchメソッドは、文字列ではなく、該当文字列に対しての、引数の正規表現によって得られる文字列配列を返します。

Answer 1

こんな感じ？

<style>
.active1{color:red;}
.active2{font-weight:bold;}
.active3{background-Color:yellow;}
</style>
<script>
$(function() {
  var c = ['active1','active2','active3'];
  var keyword = ['りんご','みかん','鮭'];
  $.each(keyword,function(x,y){
    $('.txt').filter(function(){
      return $(this).text().match(new RegExp(y));
    }).addClass(c[x]);
  });
});
</script>
<div class="box">
<p class="txt">りんご</p>
</div>

<div class="box">
<p class="txt">冬みかん</p>
</div>

<div class="box">
<p class="txt">みかん</p>
</div>

<div class="box">
<p class="txt">夏みかん</p>
</div>

<div class="box">
<p class="txt">紅鮭</p>
</div>

<div class="box">
<p class="txt">hogeりんご鮭みかんfuga</p>
</div>

Comments

[kerofu1977]

いただいたコードでテストしたところ、部分一致ができました。
ベストアンサーとさせていただきます。
ありがとうございました！

Answer 2

お気づきの通り、String.prototype.match() の戻り値はnullか配列です。下記が参考になると思います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

というわけで、マッチしたかどうかは戻り値を見て判断できるはずです。

Comments

[kerofu1977]

ご丁寧な説明ありがとうございます。
var result3 = $.inArray(result2[0], keyword);
に変更し、
if(result3 > -1){
$(this).attr('class',c[result3]);;
}
としたところ、項目が増えた場合にうまく判別ができないため、一旦クローズとさせていただきます。

jQuery.Deferred exception: Cannot read property '0' of null TypeError: Cannot read property '0' of null

[iwamot]

result2 が null ならマッチしていない、配列ならマッチしているということなんです。result3 は不要です。