正規表現を使ってdivクラスを検索

Question

簡単な、ハァッ。たくさんの答えが見つかりましたが、すべてjQueryまたはProtoTypeを使用しています。私はプレーンなJavaScriptが欲しい。それは難しいことではありませんが、JavaScriptは私のものではありません。中央の文書化は、年齢を探して、私が望むものを見つけられないということを意味しません。

は、次のHTMLコードスニペットを考えてみましょう：

<div class="central_0"> .. </div> 
<div class="central_1"> .. </div> 
<div class="central_2"> .. </div> 

今、私はそれらのdiv要素で物事を行うためにはJavaScriptを使用します。

function processDivElements() 
{ 
// search for relevant DIV classes 
var divArray = document.getElementsByClass.regex('/^central_.*$/'); 

// do stuff with the DIV elements found 
foreach (divArray as divElement) 
{ 
    divElement.style.background = '#f00'; 
}; 
} 

誰も私が適切な平野 JavaScriptにこれを翻訳する手助けすることはできますか？私はクラスではなく、IDを使用します。私は正規表現を使うのが好きです。あなたがサポートしたい場合は

var divs = document.querySelectorAll('div[class^="central_"]'); 

：あなただけの新しいブラウザをサポートしたい場合は

var $divs = $('div[class^="central_"]'); 

が、あなたは本質的に同じことを行うためにdocument.querySelectorAll()を使用することができます。

Answer 1

jQueryのソリューションは本当にいいです古いブラウザでは、コードは恐ろしいものになります：

var all_divs = document.getElementsByTagName('div'); 
var divs = []; 

for (var i = 0; i < all_divs.length; i++) { 
    var div = all_divs[i]; 

    if (div.className.match(/^central_\d+$/) { 
     divs.push(div); 
    } 
} 

私はクラスではなく、IDを使用します。私は正規表現を使うのが好きです。

あなたのクラスは一意であり、本当にクラスの意図された使用ではないIDのように機能しています。代わりに、このようなあなたのHTMLを構造：

<div id="central_0" class="central">...</div> 
<div id="central_1" class="central">...</div> 
<div id="central_2" class="central">...</div> 

を今、JavaScriptが簡単になる：

var $divs = $('.central');        // jQuery 
var divs = document.querySelectorAll('.central');  // Newer browsers 
var divs = document.getElementsByClassName('central'); // Older browsers 

Answer 2

直接正規表現にマッチした要素を取得する方法はありません、あなたができる唯一のことは得ることですすべての要素を（TagName、Nameなどのような）何かで置き換え、要素を正規表現でフィルタリングします。

htmlサンプルでは、​​TagNameですべての要素を取得でき、正規表現を使用してclassNameを正規表現で確認できます。

Answer 3

他の人が触れたように、getElementsByClassNameメソッド呼び出しで正規表現の選択を直接サポートすることはできません。

しかし、私はあなたのコードでこれらの他の問題を指摘します。あなたはJavaScriptを初めて使うからです。

クラスを使用するのは問題ありませんが、あなたのように自分のhtmlを書くことでより多くの作業をすることができます。

代わりのcentral_0....central_2それらはすべて基本的に同じCSSルール上で動作している場合、あなたは#クラスに任意の違いを割り当てることができますが、あなたのcentralクラスは、同じルールを持つことができ、このcentral zero....central twoようにそれらを記述する必要があります。この方法であなたもまたDRY principleに従ってください。

また、言語のベストプラクティスを遵守することを検討する必要があります。これらのクラスを持つ要素にCSSルールを割り当てない場合は、id'sを使用する必要があります。さらに、それはあなたの人生をはるかに簡単にします。