カスタムデータ時のセレクタ指定について

Question

前提・実現したいこと

JSPでwebページを作っています。
jqueryを用いているのですが、カスタムデータによるセレクタ指定がうまくいかずに困っています。
実現したい内容は、以下のdiv要素の色をdata-aの指定で青色に変えることです。

<要素>

<div data-a='{"msg": "hey","msg2": "hey2"}' data-b='abc'>

<スクリプト>
$('[data("a").msg = "hey"]').css('background-color', 'blue');

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

data-aの指定で青色に変えることができない（スクリプトが反応しない）。

該当のソースコード

<script>
    $("#test").on("click", function() {
      $('[data("a").msg = "hey"]').css('background-color', 'blue');
    });
</script>

試したこと

$('[data-b="abc"]').css('background-color', 'blue');
では、青色に変えることができました。

補足情報（FW/ツールのバージョンなど）

data-aのような連想配列を指定した場合に使えるようにするにはどのようにすればよいでしょうか。

Answer 1

属性セレクタに正規表現にマッチさせたりJSONとして解析したりという機能はありません。
その辺りはJavascriptで絞り込みましょう。

$(Array.from(document.querySelectorAll("div")).filter(v=>JSON.parse(v.dataset.a).msg=="hey")).css("background-color","blue")

Comments

[nyankou]

ご回答・実現方法のご教示ありがとうございます！
「属性セレクタに正規表現にマッチさせたり」といただいているのですが、「試したこと」も書いた通り
$('[data-b="abc"]').css('background-color', 'blue');
ではやりたいことができました。
$('[data-b="abc"]')は「属性セレクタの正規表現にマッチ」とは違うのでしょうか。
いまいち属性を理解できていない部分もあり、申し訳ありません。

[AT_2nd]

[data-b="abc"]は、単純な文字列の比較です。data-b属性が"abc"以外の要素は引っ掛かりません。
まず「正規表現」が何なのかという所から調べてみて下さい。
CSSセレクタとは全く関係のない領域の話ですが、文字列を取り扱う上で正規表現の存在を
知っているか知らないかで全く世界が違ってきます。
調べた上で分からない事が出てくれば、また質問を投げればいいと思います。

[nyankou]

たびたびのご回答、ありがとうございます。
すみません、自分の記載に一部誤りがありました。
$('[data-b="abc"]')は確かに正規表現ではありませんが、$('[data-b*="b"]')　（文字bを含む）も
動作しましたため、正規表現はできるものと思っていました。

JSONとして解析する機能がないということは、
$('[data-b="abc"]')と同様の表現で、data-a'{"msg": "hey","msg2": "hey2"}の"msg"のみを取り出すことはできないということですね。
JSONの表現を使えるからといってJSONの解析機能が備わっているというわけではないのですね。
大変参考になりました。ありがとうございます。

[maisumakun]

> $('[data-b="abc"]')は確かに正規表現ではありませんが、$('[data-b*="b"]')　（文字bを含む）も
動作しましたため、正規表現はできるものと思っていました。

セレクタ内部で「前方一致」「後方一致」などの簡単なパターンマッチングは可能ですが、正規表現ほど強力ではありません。

[nyankou]

なるほど、私の正規表現の認識が誤っているようです。正規表現を勉強してみます。
何度も回答いただき、本当にありがとうございました。
大変助かりました。