Regular expression getElementById

Question

I need to use pure Javascript for the first time in a long while, and having gotten used to the comfy 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.

For old Internet Explorer versions it won't work, but check out the `querySelectorAll()` method available in up-to-date browsers. — Pointy, Sep 24 '12 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, Sep 24 '12 at 14:20
Also it's worth noting that you'd be much better off giving those elements a class of "123456". — Pointy, Sep 24 '12 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, Sep 24 '12 at 14:23
Ah ok I see. Well you can't use a regex, but I think that new browsers allow `querySelectorAll("[id^=id_123456]")` — Pointy, Sep 24 '12 at 14:26
Second Answer at this SO thread might be helpful. http://stackoverflow.com/questions/1938294/select-div-using-wildcard-id — samuelesque, Sep 24 '12 at 14:28
You should not be selecting by `[id]`, but instead by `[class]`. — zzzzBov, Sep 24 '12 at 14:30

jfriend00 · Accepted Answer · 2012-09-24T14:37:20.693

8

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.net/jfriend00/pYSCq/

edited Sep 24 '12 at 14:37

answered Sep 24 '12 at 14:28

jfriend00

683,504
96
985
979

score 4 · Answer 2 · edited May 23 '17 at 12:16

4

HTML DOM querySelectorAll() method will work here.

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

Borrowed from StackOverFlow here

edited May 23 '17 at 12:16

Community

1
1

answered Jun 16 '16 at 10:18

paje007

1,001
7
9

score 1 · Answer 3 · answered Sep 24 '12 at 14:31

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.net/alnitak/fgSph/

score 1 · Answer 4 · answered Sep 24 '12 at 14:33

Here you are: http://jsfiddle.net/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/>";
    }
}

Regular expression getElementById

4 Answers4

Linked

Related