Using regex incremental numbers in javascript

Question

I'm trying to hide elements by their ids:

document.getElementById('Table1').style.display = 'none';

But there are many divs goes like Table1, Table2, Table3...

So how to use regular expressions in a situation like this?

Regular expressions aren't useful here. Do you want to use them for any particular reason? — Waleed Khan
– Waleed Khan, Commented Mar 11, 2013 at 11:47
My reason is to hide all elements with the id Table*. I think it requires regex, doesnt it? — Adige72
– Adige72, Commented Mar 11, 2013 at 11:59

VisioN · Accepted Answer · 2013-03-11 11:57:56Z

2

Set class to all these elements. It was invented for such cases.

HTML:

<div id="Table1" class="myTables"></div>
<div id="Table2" class="myTables"></div>
<div id="Table3" class="myTables"></div>

JavaScript:

var elements = document.getElementsByClassName("myTables");
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.display = "none";
}

UPDATE: If setting classes is not applicable in your case, you can always use the modern method querySelectorAll with attribute starts with selector:

var elements = document.querySelectorAll("div[id^='Table']");
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.display = "none";
}

DEMO: http://jsfiddle.net/L2de8/

edited Mar 11, 2013 at 11:57

answered Mar 11, 2013 at 11:49

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adige72 Over a year ago

For specific reasons, it's not applicable to assign classes in my project.

SWilk · Accepted Answer · 2013-03-11 11:59:03Z

1

Regural expression will not work in this example.

Either use a common class name on all the elements, or, if you cannot change HTML, you can use Selectors API to select the elements you need to hide.

Use

var allElemsWithIdStartingFromTable =  document.querySelectorAll('[id^="Table"]');

to select all elements with ID starting with "Table", so it would be Table1, Table2, but also TableOfProducts, keep that in mind.

Then you need to iterate over this and check if the id attribute matches /^Table\d+$/ regular expression.

answered Mar 11, 2013 at 11:59

SWilk

3,5068 gold badges33 silver badges52 bronze badges

Comments

sasi · Accepted Answer · 2013-03-11 11:53:41Z

0

for example..if you give myTables as class name for div..use that for lenght..

var elements = document.getElementsByClassName("myTables");//to know the length only..
        for(var i=0;i<elements.length;i++)
        {
        document.getElementById('Table'+i).style.display = 'none';
        }

use looping concept..its an example..

edited Mar 11, 2013 at 11:53

answered Mar 11, 2013 at 11:47

sasi

4,3784 gold badges30 silver badges48 bronze badges

1 Comment

sasi Over a year ago

@VisioN your way is good..i like your answer..for length purpose there is no other way..i felt your is better way..

Collectives™ on Stack Overflow

Using regex incremental numbers in javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related