jQueryの.match()に入れたい文字列が複数個ある場合

Question

###前提・実現したいこと
下記ソースコードの.match()に、複数の文字列を入れて判定をしたいです。
現状では「オレンジ」のみ入っていますが、その他の「アップル」、「パイン」、「バナナ」も.match()に入れるには、どのように書けば宜しいでしょうか？

ただし、.match()に入れる文字は選択できるようにしたいです。
※たとえば「アップル」と「バナナ」のみの場合や、そこに後から「オレンジ」を追加したり、または「バナナ」を削除したりできるようにしたいです。

###該当のソースコード

<table>
  <tr>
    <td>オレンジ</td>
  </tr>
  <tr>
    <td>アップル</td>
  </tr>
  <tr>
    <td>パイン</td>
  </tr>
  <tr>
    <td>バナナ</td>
  </tr>
</table>

var $element = $('table tr td');
$($element).each(function () {
  var itemName = $(this).text();
  if (itemName.match('オレンジ')) {
    console.log('match!');
  }
});

Comments

[date]

選択できるの部分はどう選択する仕組みにするのですか?

[退会済みユーザー]

先にご回答頂いたmasaya_ohashiさんのようにOR判定か、もしくはテキストの部分のみ別の箇所に記載して、そこから追加・削除を操作できればと思っています。

Answer 1

このmatchは単にtextのmatchですよね？
hitするたびにmatch!を表示してもしかたないので、hit数を数える方がよくないですか

$(function(){
  console.log($('td').filter(function(){
    return $(this).text().match(/オレンジ|アップル|パイン|バナナ/);
  }).length);
});

<table>
<tr>
<td>オレンジ</td>
</tr>
<tr>
<td>アップル</td>
</tr>
<tr>
<td>パイン</td>
</tr>
<tr>
<td>バナナ</td>
</tr>
</table>

Comments

[退会済みユーザー]

ご回答ありがとうございます。console.log()は仮のもので、実際は別の処理を行うことを想定しており、私の説明不足でした。ご回答いただいたにも関わらず申し訳ございません。頂いたコードは今後、大いに参考にさせて頂きたいと思います。

[yambejp]

ちなみにmatchは単純にクォーテーションでくくるのではなくデリミタにスラッシュを使う
'xxx|yyy|zzz'
↓↓↓
/xxx|yyy|zzz/

もしくは
new RegExp('xxx|yyy|zzz')

ののような処理をするのがjavascriptにおける正規表現の原則です

[退会済みユーザー]

そうなのですね。知りませんでした。基礎的な観点が抜けていたため、またひとつ勉強させていただきました。ありがとうございます。

Answer 2

jQuery.match(http://js.studio-kingdom.com/javascript/string/match)は正規表現での判定ですので、|を使ったOR判定が可能です。

var $element = $('table tr td');
$($element).each(function () {
  var itemName = $(this).text();
  if (itemName.match('オレンジ|アップル|パイン|バナナ')) {
    console.log('match!');
  }
});

動作サンプル
https://jsfiddle.net/0kt3r0yr/

Comments

[退会済みユーザー]

ご回答ありがとうございます。OR判定ができることは知りませんでした。単純なことかもしれませんが、とても勉強になりました。ありがとうございます。

Answer 3

clickした文字にclassを付けてマッチング時にclassがあるテキストでマッチング処理

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var $element = $('table tr td');
	$('table tr td').click(function(){
		 if($(this).hasClass('match')){
			 $(this).removeClass("match");
		  }else{
			  $(this).addClass("match");
		  }
	});
})
function match(){
	var $element = $('table tr td');
	var match
	var match_flag = false;
	var matching
	$(".match").each(function() {
	    console.log($(this).text());
	    if(match_flag==false){
	    	matching=$(this).text();
	    	match_flag=true;
	    }else{
	    	matching+="|" + $(this).text();
	    }
	});
	if(match_flag==false){
		alert("選択されていません")
	}else{
	
		$($element).each(function () {
			console.log(matching);
			var itemName = $(this).text();
			if (itemName.match(matching)) {
				console.log('match!');
			}
		});
	}
}
</script>
<table>
	<tr>
		<td>オレンジ</td>
	</tr>
	<tr>
		<td>アップル</td>
	</tr>
	<tr>
		<td>パイン</td>
	</tr>
	<tr>
		<td>バナナ</td>
	</tr>
</table>
<button type="button" onClick="match()">マッチング</button>

Comments

[退会済みユーザー]

丁寧にご説明頂きありがとうございます。ただ申し訳ないのですが今回ボタンクリックで判定するような仕組みを考えておりませんでしたので、若干趣旨から逸れてしまいます。しかしながら、このような方法もあるのだと目から鱗です。勉強になりました。