Find all matching selectors with RegExp in JavaScript
Given the information provided, I would suggest:
// using Array.prototype.filter, to filter the elements returned by
// 'document.querySelectorAll()'
var elementPrefixed = [].filter.call(document.querySelectorAll('[class*=element]'), function(el) {
// '\b' is a word-boundary,
// 'element' is the literal string
// \d+ is a string of numeric characters, of length one or more:
return (/\belement\d+\b/).test(el.className);
});
// iterates over the found elements, to show those elements that were found:
[].forEach.call(elementPrefixed, function(el) {
el.style.color = '#f90';
});
div {
height: 2em;
border: 1px solid #000;
margin: 0 auto 0.5em auto;
width: 50%;
}
div[class]::before {
content: attr(class);
}
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
<div class="element4"></div>
<div class="elementOther"></div>
<div class="element"></div>
<div class="2element"></div>
<div class="3element1"></div>
<div class="4element15"></div>
Alternatively, you can also extend the prototype Document
to suggest a method document.getElementsByRegex()
:
// adding a method to the Document.prototype:
Document.prototype.getElementsByRegex = function (attr, reg) {
// attr: String, an attribute of the element you wish to search by,
// reg: a RegExp literal which should perform the search.
// here we find all elements in the document with the specific attribute:
var superSet = document.querySelectorAll('[' + attr + ']');
// if there are no elements with that attribute, we return null:
if (!superSet.length) {
return null;
}
else {
// otherwise we return a filtered array, of those elements
// which have an attribute matching the regular expression:
return [].filter.call(superSet, function (el) {
// we're using 'el.getAttribute(attr),' rather than el[attr],
// because searching by class would require el[className], and 'for'
// would require el[HTMLFor]; getAttribute irons out those kinks:
return reg.test(el.getAttribute(attr));
// Note that this method returns an Array, not a NodeList (live or otherwise)
// unlike document.getElementsByClassName() for example
});
}
};
// adding a method to the Document.prototype:
Document.prototype.getElementsByRegex = function (attr, reg) {
// attr: String, an attribute of the element you wish to search by,
// reg: a RegExp literal which should perform the search.
// here we find all elements in the document with the specific attribute:
var superSet = document.querySelectorAll('[' + attr + ']');
// if there are no elements with that attribute, we return null:
if (!superSet.length) {
return null;
}
else {
// otherwise we return a filtered array, of those elements
// which have an attribute matching the regular expression:
return [].filter.call(superSet, function (el) {
// we're using 'el.getAttribute(attr),' rather than el[attr],
// because searching by class would require el[className], and 'for'
// would require el[HTMLFor]; getAttribute irons out those kinks:
return reg.test(el.getAttribute(attr));
// Note that this method returns an Array, not a NodeList (live or otherwise)
// unlike document.getElementsByClassName() for example
});
}
};
console.log(document.getElementsByRegex('id', /\belement\d+\b/));
div {
height: 2em;
border: 1px solid #000;
margin: 0 auto 0.5em auto;
width: 50%;
}
div[class]::before {
content: attr(class);
}
<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>
<div class="element4"></div>
<div class="elementOther"></div>
<div class="element"></div>
<div class="2element"></div>
<div class="3element1"></div>
<div class="4element15"></div>
Literature:
source to share
querySelectorAll(selector)
takes a string as its argument selector
, so you can't just pass a regular expression to it. If you need regular expressions, see David Thomas's answer .
However, you may not need a regex depending on your use case, since the string argument can be a comma-separated list of selectors.
So, if all you really want is .element1
, .element2
and .element3
, you can just pass them all as one string, each separated by commas:
var elements = document.querySelectorAll('.element1,.element2,.element3');
source to share
If your class elements .element1
, .element2
, .element3
etc, you can try something like this:
// Create an array from 1 to 5
var x = Array.apply(null, Array(5)).map(function (_, i) {return i + 1;});
var elems = [];
for (i = 0; i < x.length; i++) {
var element = document.querySelectorAll('.element' + x[i]);
elems.push(element);
}
source to share