getElementByName & Regex

Question

How do I loop through all elements using regular expression in getElementByName?

Don't describe how you think you can solve your problem, describe your *problem*. — Tomalak, Jul 06 '10 at 07:17
I have controls dynamically populated.. Since they are asp controls, the Id will be changed while being rendered. I was thinking since the name attribute always contains the word "customcontrol", then maybe I could loop through all the controls. — user384080, Jul 06 '10 at 07:23
What do you need to do with these controls? Also, would it not be possible to add a common class to them all? — James, Jul 06 '10 at 07:32
I need to do validation and insertion to database.. Can we please focus to the questions? is it even possible to implement regex with getElementsByName? — user384080, Jul 06 '10 at 11:00
When you say contain the word "customcontrol", does that mean it could be "customcontrol1" or "customcontrolnum" etc.. — , Jul 06 '10 at 11:26

score 18 · Accepted Answer · 2010-07-07T06:04:15.740

If you mean like:

var elementArray = document.getElementsByName("/regexhere/");

then no that would not be possible.

To do what you want to do you would have to get all the elements, then go through each one and check the name of it.

Heres a function that will go through all the elements and add all the elements with a certain name to an array:

    function findElements(name)
    {
        var elArray = [];
        var tmp = document.getElementsByTagName("*");

        var regex = new RegExp("(^|\\s)" + name + "(\\s|$)");
        for ( var i = 0; i < tmp.length; i++ ) {

            if ( regex.test(tmp[i].name) ) {
                elArray.push(tmp[i]);
            }
        }

        return elArray;

    }

And use as:

var elName = "customcontrol";

var elArray = customcontrol(elName);

Or it might be easier by className

    function findElements(className)
    {
        var elArray = [];
        var tmp = document.getElementsByTagName("*");

        var regex = new RegExp("(^|\\s)" + className+ "(\\s|$)");
        for ( var i = 0; i < tmp.length; i++ ) {

            if ( regex.test(tmp[i].className) ) {
                elArray.push(tmp[i]);
            }
        }

        return elArray;

    }

And use as:

var elClassName = "classname";

var elArray;

if (!document.getElementsByClassName)
{
   elArray= findElements(elClassName );
}
else
{
   elArray = document.getElementsByClassName(elClassName);
}

This would do what you want, without the need for getElementByName.

Although I think you meant getElementsByName

If you wanted to look for an element with only the name "customcontrol" you would use:

var regex = new RegExp("(^|\\s)" + name + "(\\s|$)");

If you wanted to look for an element with that STARTED with the name "customcontrol" you would use:

var regex = new RegExp("(^|\\s)" + name);

EDIT:

If your using jQuery, which would be easier, then this would do:

var elArray = $("*[name^='customcontrol']");

//Use JavaScript to loop through
for (var a = 0; a< elArray.length;a++)
{
   //Loop through each element
   alert(elArray[a]);
}
//Or
$("*[name^='customcontrol']").css("color","red"); //Or whatever you want to do to the elements

+1 nicely done, I totally forgot that jQuery had some form of matching built in. Also look at: http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions — cgp, Jul 06 '10 at 23:53

score 0 · Answer 2 · answered Jul 06 '10 at 13:14

0

Use a custom selector in jQuery. You probably want an example with parameters.

answered Jul 06 '10 at 13:14

cgp

41,026
12
101
131

I never knew you could do that! Thats sweet. – Jul 06 '10 at 13:48

getElementByName & Regex

2 Answers2

Linked