I need to use pure Javascript for the first time in a long while, and having gotten used to the fy mattress of jQuery, all the important stuff is escaping me.

I need to select a bunch of divs on regular expression. So I have stuff like this;

<div id="id_123456_7890123"> .. </div>
<div id="id_123456_1120092"> .. </div>
<div id="id_555222_1200192"> .. </div>
<div id="id_123456_9882311"> .. </div>

And I'd need to create a loop that goes through all the divs with an id that begins with id_123456_. How would I go about doing that?

I used jQuery with the :regex filter plugin before, but looking at it, it doesn't seem like there's much I could salvage in a pure javascript rewrite.

I need to use pure Javascript for the first time in a long while, and having gotten used to the fy mattress of jQuery, all the important stuff is escaping me.

I need to select a bunch of divs on regular expression. So I have stuff like this;

<div id="id_123456_7890123"> .. </div>
<div id="id_123456_1120092"> .. </div>
<div id="id_555222_1200192"> .. </div>
<div id="id_123456_9882311"> .. </div>

And I'd need to create a loop that goes through all the divs with an id that begins with id_123456_. How would I go about doing that?

I used jQuery with the :regex filter plugin before, but looking at it, it doesn't seem like there's much I could salvage in a pure javascript rewrite.

• javascript
• regex
• foreach
• getelementbyid

• For old Internet Explorer versions it won't work, but check out the querySelectorAll() method available in up-to-date browsers. – Pointy Commented Sep 24, 2012 at 14:18
• I'm doing Grease/Tampermonkey, so IE is entirely irrelevant, and it feels good man. Thanks for the tip, I'll check that out – Emphram Stavanger Commented Sep 24, 2012 at 14:20
• Also it's worth noting that you'd be much better off giving those elements a class of "123456". – Pointy Commented Sep 24, 2012 at 14:20
• Granted, but since it is a userscript for an external site, the DOM is out of my hands. Also the same reason for why I'd prefer using jQuery, but can't. I checked querySelectorAll(), and it does seem like it lists many elements, but I don't understand how you'd get regexp into it – Emphram Stavanger Commented Sep 24, 2012 at 14:23
• 2 Ah ok I see. Well you can't use a regex, but I think that new browsers allow querySelectorAll("[id^=id_123456]") – Pointy Commented Sep 24, 2012 at 14:26

4 Answers 4

In plain javascript, you could do this generic search which should work in every browser:

var divs = document.getElementsByTagName("div"), item;
for (var i = 0, len = divs.length; i < len; i++) {
    item = divs[i];
    if (item.id && item.id.indexOf("id_123456_") == 0) {
        // item.id starts with id_123456_
    }
}

Working example: http://jsfiddle/jfriend00/pYSCq/

HTML DOM querySelectorAll() method will work here.

document.querySelectorAll('[id^="id_"]');

Borrowed from StackOverFlow here

This works by recursively traversing the whole DOM.

It's possibly not the most efficient, but should work on every browser.

function find_by_id(el, re, s) {

    s = s || [];
    if (el.tagName === 'DIV' && re.exec(el.id) !== null) {
        s.push(el);
    }

    var c = el.firstChild;
    while (c) {
        find_by_id(c, re, s);
        c = c.nextSibling;
    }

    return s;
}

var d = find_by_id(document.body, /^id_123456_/);

See http://jsfiddle/alnitak/fgSph/

Here you are: http://jsfiddle/howderek/L4z9Z/

HTML:

<div id="nums">
<div id="id_123456_7890123">Hey</div>
<div id="id_123456_1120092">Hello</div>
<div id="id_555222_1200192">Sup</div>
<div id="id_123456_9882311">Boom</div>
</div>
<br/>
<br/>
<div id="result"></div>​

Javascript:

divs = document.getElementsByTagName("div");
divsWith123456 = new Array();
for (var i = 0;i < divs.length;i++) {
    if (divs[i].id.match("id_123456") != null) {
        divsWith123456.push(divs[i]);
        document.getElementById("result").innerHTML += "Found: divs[" + i + "] id contains id_123456, its content is \"" + divs[i].innerHTML + "\"<br/><br/>";
    }
}​