Regex generation of div's

JavaScript
1

Hi there I know this is not a regex community but I wanted to try before looking for a proper forum that can help me with this.

I want to generate this tag multiple times (a lot)

  • div number should increment by 1
  • figcaption should increment by 1
                        <div class="div1">
                            <!--<figure>-->
                                <img src="../img/test.png">
                                <!--<figcaption>test2000</figcaption>-->
                            <!--</figure>-->
                        </div>

Would regex be the solution for this? I have other pieces of code i also need to generate and is too crazy to copy and paste/edit manually. I wanted to start with this one and learn on by myself.

2

I’m not sure what you are asking. Regular expressions are typically used to match patterns, not to generate text. Could you explain what you’re trying to do in more detail?

3

I have to create multiple divs (5000) and also the same amount of css grid locations. The images are going to be changed manually in time.

Not sure what I can say more about the functionality. Pretty sure a for loop wont work because it would write over the manually edited divs?

4

Im no expert but as @ArielLeslie said , regex are primarily used to match or filter out patterns and not create stuff like divs.

It will work but it depends on how you write it. I cant give you any samples since I hv no idea what project you are doing. From the information you hv given , u dont need to write over the divs, you can use += operator to append more divs using javascript innerHTML.
Again, im not sure what kind of case you are dealing with so take this with a grain of salt. :slight_smile:

1 Like
5

But with append, it would also overwrite manual edited divs.
I’m really not sure how I can edit this to make it clear :sweat_smile:

But I guess that regex isn’t the tool and should look at something different!

6

Without seeing your project, it is hard to offer specific advice, but there are a number of ways that you could programatically create some divs while hardcoding others.

If you’re going to be doing a lot of programatic DOM manipulation, you also might want to consider using a framework like React, Angular, or Vue.

7

:open_mouth: Can you elaborate what you meant by manually edited?
Are they divs you wrote in html or by some other way?

Yep :slight_smile:. If you are familiar with frameworks or libraries you might be able to find a way to deal with your situation, maybe.

Edit: if you mean manually edited images in the divs which you must edit later, you can access the ids of the divs generated by storing them and then change the image property .

8

I’m currently writing them by hand (and a little copy pasting where possible)
But I kind of need the divs (div1 to div1000 ) to have hardcoded number that increment per div. This for the class, the figcaption text and the image.png (001.png - 1000.png)

Don’t think js or DOM action will create this hard-coded code.

9

Js can definitely do this . If you know React, its all the more simple.

10

Hi not sure if I should re-ask this question or edit it to leave the regex out!

But if I use javascript:

How can I add classes to this example:
I want to add the class=“cellclass” to every div in this code.

 container = document.getElementById( 'container' );
 for (var cell = 1; cell <= 3500; cell++) {
     container.innerHTML += '<div id="page"> new divs </div>';

}

I’m trying to generate this with JS or jQuery and then just copy and paste the source code of it.

                    <div class="div">
                        <!--<figure>-->
                        <img src="../img/img.png">
                        <!--<figcaption> Img1</figcaption>-->
                        <!--</figure>-->
                    </div>

But adding the cell doesn’t seem to work.

If I add this:

  function myFunction() {
    var element = document.getElementById("page");
    element.classList.add("cellclass");
    }

It only adds it to the first div.

11

I don’t really understand what output it is you are looking for but you can use template literals for the HTML string.

container = document.getElementById("container");

for (var cell = 0; cell < 10; cell++) {
  container.innerHTML += `
       <div class="cellclass">
        <figure>
          <img src="../img/img${cell}.png">
          <figcaption>Img${cell}</figcaption>
        </figure>
      </div>
     `;
}
1 Like
12 
let container;

for(let cell = 1;  cell <= 3500; cell++) {
    container = document.createElement('div');
    container.className = "cellClass";

    document.getElementById('parent').appendChild(container);
}

This should constantly update it

1 Like
13

Small side question how can I get the image order to be 00001.png

I know this in python is something like

image-%03d

Or do I have to batch edit all my images?

Update: I tried this


let n = 0;   
n = ("000"+n).substr(-4); // n === "03"

But it only shows the first row 0001 and doesn’t count up for the rest of them?
if n is in the for loop shouldn’t it edit all following loops?

14

Start the loop at 1 and use the padStart method.

I assume you want:

00001
00010
00100
01000

<img src="../img/img${cell.toString().padStart(5, 0)}.png">

BTW, if you try looping 3500 times using your current code it will block the browser. When I tested it ran out of memory and crashed (Edit: I was testing it with invalid file paths so that might also have contributed).

If you switch to insertAdjacentHTML it works, but it’s still pretty resource-intensive code.

container = document.getElementById('container');

for (var cell = 1; cell <= 3500; cell++) {
  const HTML = `
       <div class="cellclass">
        <figure>
          <img src="../img/img${cell.toString().padStart(5, 0)}.png">
          <figcaption>Img${cell}</figcaption>
        </figure>
      </div>
     `;
  container.insertAdjacentHTML('beforeend', HTML);
}
1 Like
15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.