ここで扱うセレクタは複数の要素を選択できるjQueryの$()とjavascript備え付けのquerySelectorAllの二つです。$([“属性名=’value'”]),querySelectorAll([“属性名^=’value'”])で条件式に合った要素が返ってきます。このvalueの中で正規表現が使えます。比較演算子は次の表です。
| |= | valueか、-valueが属性名な要素を選択 |
| *= | 部分一致。valueを含む文字列が属性名な要素を選択 |
| ~= | スペースで区切られた複数の属性名を持つ要素が主な対象。valueな属性名を含む要素を選択。 |
| $= | 後方一致。末尾にvalueを含む文字列が属性名な要素を選択 |
| = | 完全一致。valueが属性名な要素を選択 |
| != | 否定。valueでない文字列が属性名な要素を選択。属性名がない要素も選択。 |
| ^= | 前方一致。先頭にvalueを含む文字列が属性名な要素を選択 |
querySelectorAllの返り値はNodelist型のため配列に変換しないと煩雑です。変換には次のコードが使えます。
Array.prototype.slice.call(document.querySelectorAll("属性名=value"))次のようなArray.from()ならさらに楽です。
Array.from(document.querySelectorAll("属性名=value"))Array.from()はこれを書いている時点でブラウザによる対応が怪しいです。対応表は次になります。Can I useも次の対応表へ案内してくれます。
ECMAScript 6 compatibility table
well-known symbolsの行が完全対応なら大丈夫なはずです。Array.fromが使えないなら上のArray.prototype.slice.callです。
配列を
arr.forEach(funcion(a){/*処理*/});なコードの様に扱うと処理が短く色々書けます。jQueryのイベント付与処理なら$(“#”+a.id).click(function(){/*click時処理*/})の様な具合です。
次のコードな正規表現で各文字列の差分を取る（最初の属性選択時の共通部分以外を抜き出す）ことでさらに使う幅が広がります。
| a.属性名.replace(/^value/g,”) | 前方一致したvalue部分を空にする |
| a.属性名.replace(/value$/g,”) | 後方一致したvalue部分を空にする |
| a.属性名.replace(/value/g,”) | 部分一致したvalue部分を空にする |
属性名の命名規則をかっちりしていれば正規表現で楽にコーディングできます。
