jqueryセレクタの正規表現抽出について

Question

【やりたいこと】
「テスト」ボタンをおすと、class「abc」の行の内、「txt_sel_message」のテキストボックスに入力した文字を「data-tr」に含むtdの
色を変更させる動作となっているが、「txt_sel_message」に何も入力されていない場合はすべて該当としたい。
しかし、以下のサンプルのコードだと、val_message=''の場合はすべて非該当となってしまう（すべて該当になると思っていました）。

【サンプル】
<input type = "button" name="test" value="テスト" id = "test"/>
<input style="width:100%; box-sizing:border-box" class="input_change" name="txt_sel_message" />

<table> <tr class = "abc"><td data-tr='xyz'>1</td></tr> <tr class = "abc"><td data-tr='hrq'>2</td></tr> <tr class = "abc"><td data-tr='opq'>3</td></tr> <tr class = "abc"><td data-tr='xyx'>4</td></tr> <tr class = "abc"><td data-tr='xyy'>5</td></tr> </table> <script> $("#test").on("click", function() { val_message = $("input[name='txt_sel_message']").val(); $(".abc").find("[data-tr *= '"+val_message+"']").css('background-color', 'lightcoral'); }); </script>

【確認したいこと】
・「txt_sel_message」が未入力の場合は、val_message=''となると思いますが、find("[data-tr *= '"+val_message+"']")と組み合わせると
「制限する文字がない」→すべて該当　という図式にはならないのでしょうか。（すべて非該当となってしまうのはなぜでしょうか）
・「txt_sel_message」が未入力の場合は、全てを該当とする方法はありませんでしょうか。

Answer 1

残念ながら、[data-xx*=""]はヒットしないという仕様になっています。

If "val" is the empty string then the selector does not represent anything.（W3C）

「txt_sel_message」が未入力の場合は、全てを該当とする方法はありませんでしょうか。

空文字列の場合だけ条件分岐して別処理させるしかないです。

Comments

[nyankou]

ご回答ありがとうございました。
そのような仕様になっているのですね。
ネットで探しても明記されていなかった為、すっきりしました。
ちなみに、find("[data-tr *= '"+val_message+"']")
で、全てをヒットさせたい場合には、val_messageに設定する適切な表現はあるのでしょうか。
それとも
条件分岐でfind("[data-tr *= '"+val_message+"']")を実行しないという方法しかないのでしょうか。

[maisumakun]

> それとも条件分岐でfind("[data-tr *= '"+val_message+"']")を実行しないという方法しかないのでしょうか。

そのとおりです。

[nyankou]

承知しました。
ご回答ありがとうございました。

Answer 2

<script>
$(function(){
  $("#test").on("click", function() {
    var v= $("input[name='txt_sel_message']").val();
    $(".abc [data-tr]")
      .css('background-color','')
      .filter(v?"[data-tr *= '"+v+"']":"*")
      .css('background-color', 'lightcoral');
  });
});
</script>
<input name="txt_sel_message">
<input type = "button" name="test" value="テスト" id = "test">
<table>
<tr class = "abc"><td data-tr='xyz'>1</td></tr>
<tr class = "abc"><td data-tr='hrq'>2</td></tr>
<tr class = "abc"><td data-tr='opq'>3</td></tr>
<tr class = "abc"><td data-tr='xyx'>4</td></tr>
<tr class = "abc"><td data-tr='xyy'>5</td></tr>
</table>

Comments

[nyankou]

ご回答ありがとうございました。
?を使用する構文は初めてで、調べてみようと思います。

[yambejp]

> ?を使用する構文は初めて

三項演算子といいます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

[nyankou]

サンプルまで付けていただきありがとうございます。
今回提示した例だと[data-tr *= '"+v+"']のみなのですが、[data-tr10 *= '"+f+"']（fには別テキストボックスの内容を設定）もand条件として組み込みたいと考えています。
filter((v?"[data-tr *= '"+v+"']":"*")&&(f?"[data-tr10 *= '"+f+"']":"*"))
とやってみたのですが後者の(f?"[data-tr10 *= '"+f+"']":"*")しか
反映されないようでした。filterの中に三項演算子を使用して複数条件を設定することはできないのでしょうか。