Search for div classes with regex

Question

Sounds simple, huh. Lot's of answers i found but all use jQuery or ProtoType. I want plain JavaScript. It shouldn't be that hard, but JavaScript is not my thing; no central documentation means searching for ages and not finding what i want.

Consider the following HTML code snippet:

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

Now I want to use JavaScript to do things with those DIVs.

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';
 };
}

Can anyone help me translate this to proper plain JavaScript? I use classes, not IDs. I prefer using a regular expression.

Answer 1

The jQuery solution is really nice:

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

If you only want to support newer browsers, you can use document.querySelectorAll() to do essentially the same thing:

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

If you want to support older browsers, the code gets horrible:

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);
    }
}

Also:

I use classes, not IDs. I prefer using a regular expression.

Your classes are unique and are really functioning like IDs, which isn't really the intended use of classes. Structure your HTML like this instead:

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

Now, the JavaScript becomes simpler:

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

Answer 2

As the others have mentioned you can't directly support a regex select on the getElementsByClassName method call.

But I will point out these other issues with your code, since you are new to javascript.

Using classes is fine, but your making more work for yourself by writing up your html like that.

Instead of the central_0....central_2 if they are all basically operating on the same css rules, you should write them like this central zero....central two then your central class can have identical rules, while you can assign any differences to the # classes. This way your also adhering to the DRY principle.

Also you should really consider sticking to the best practices for the language. If your not assigning css rules to your elements with those classes then you should be using id's, plus it makes your life much easier.

Answer 3

There is no way to get the matched elements by regex directly, the only thing you could do is to get all the elements by something (like: TagName, Name, etc..) and then filter the elements by regex.

With your html sample, you could only get all the element by TagName, and use regex to check the className by regex.