83

I have a XSL that created multiple elements with the id of "createdOn" plus a $unique-id

Example : createdOnid0xfff5db30

I want to find and store these in a variable using JavaScript. I've tried

var dates = document.getElementsById(/createdOn/);

but that doesn't appear to work.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
meriley
  • 1,831
  • 3
  • 20
  • 33
  • Possible duplicate of [getElementById() wildcard](http://stackoverflow.com/questions/4275071/getelementbyid-wildcard) – Liam May 12 '17 at 12:28

5 Answers5

143

Using jQuery you can use the attr starts with selector:

var dates = $('[id^="createdOnid"]');

Using modern browsers, you can use the CSS3 attribute value begins with selector along with querySelectorAll:

var dates = document.querySelectorAll('[id^="createdOnID"]');

But for a fallback for old browsers (and without jQuery) you'll need:

var dateRE = /^createdOnid/;
var dates=[],els=document.getElementsByTagName('*');
for (var i=els.length;i--;) if (dateRE.test(els[i].id)) dates.push(els[i]);
cloned
  • 6,346
  • 4
  • 26
  • 38
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • @Šime I don't know the answer, either for jQuery, W3C specs, or real-world browser behavior. But it can't hurt the functionality :) – Phrogz Apr 11 '12 at 18:24
  • Cool. I made Selenium do that with `self.driver.execute_script("return document.querySelectorAll... ")[0].click()` – Sergey Orshanskiy Sep 25 '14 at 21:15
  • What if the string you're looking foris not hardcoded (stored in a variable) how can it be used ? – magmine Aug 08 '23 at 10:09
20

You should have just used simple CSS selector together with JavaScript's .querySelectorAll() method.

In your case :

var dates = document.querySelectorAll('[id^="createdOnId"]');
Daut
  • 2,537
  • 1
  • 19
  • 32
7

Because you didn't tag jQuery, and you probably don't need it, my suggestion would be to add a class to these elements when you create them. Then use the getElementsByClassName() function that's built into most browsers. For IE you would need to add something like this:

if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}
Community
  • 1
  • 1
Isaac Fife
  • 1,659
  • 13
  • 15
  • Testing the className for a specific class can be easier and faster by creating a regex: `var lookingFor = new RegExp('(?:^|\\s)'+arguments[0]+'(?:\\s|$)'); ... if (lookingFor.test(el.className)){ ... }` – Phrogz Apr 11 '12 at 18:29
2
function idsLike(str){
    var nodes= document.body.getElementsByTagName('*'),
    L= nodes.length, A= [], temp;
    while(L){
        temp= nodes[--L].id || '';
        if(temp.indexOf(str)== 0) A.push(temp);
    }
    return A;
}

idsLike('createdOn')
kennebec
  • 102,654
  • 32
  • 106
  • 127
1

Try the following:

var values = new Array(valueKey_1);
var keys = new Array("nameKey_1");
var form = document.forms[0];
for (var i = 0; i < form.length; i++) {
    name = form.elements[i].name;
    var startName = name.toLowerCase().substring(0, 18);
    if (startName == 'startStringExample') {
    values.push(name.value);
    keys.push(name);
    }
}
Sankumarsingh
  • 9,889
  • 11
  • 50
  • 74
PeterPink
  • 109
  • 1
  • 3