How to getElementByName() with a regex?

Question

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

Janettajanette

Don't describe how you think you can solve your problem, describe your problem. – Ation

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. – Janettajanette

What do you need to do with these controls? Also, would it not be possible to add a common class to them all? – Alaster

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? – Janettajanette

When you say contain the word "customcontrol", does that mean it could be "customcontrol1" or "customcontrolnum" etc.. – Sensibility

Updated my answer. That should help. – Sensibility

Why not add a class name to each control? – Licking

@pekka That would be the easiest way. – Sensibility

Answer 1

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

Sensibility

How do I loop through using $("*[name^='customcontrol']");? – Janettajanette

+1 nicely done, I totally forgot that jQuery had some form of matching built in. Also look at: #190753 – Cup

@ronald-yoh Updated my answer for looping through elements. – Sensibility

Answer 2

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

Cup

I never knew you could do that! Thats sweet. – Sensibility