How to dynamically replace a picture src using the replace function in javascript?

Question

I'm trying to dynamically replace the src of some pictures using a the replace functon in javascript. I am not sure how I should write the regex though.

I'd like to replace the terms:1200|990|768|590|petit by something else.

Here's my code:

<div class="row">
            <div class='col20 cs50'>
                <div class="row">
                    <div class="col100">
                        <div class="contenu">
                            <p class='square'>Design and styled with Ulkit.</p>
                        </div>
                    </div>
                    <div class="col100">
                        <div class="contenu">
                            <img class='pictures' src=''>
                        </div>
                    </div>
                </div>
            </div>
            <div class='col40 cs50'>
                <div class="bg-contenu cssmall">5</div>
            </div>
            <div class='col40 cs100'>
                <div class="row">
                    <div class='col50 cs50 '>
                        <div class="contenu">
                            <p class='square'>Flexible, nested grid layout.</p>
                        </div>
                    </div>
                    <div class='col50 cs50'>
                        <div class="contenu">
                            <img class='pictures'src=''>
                        </div>
                    </div>
                    <div class='col100'>
                        <div class="contenu">
                            <img class='pictures'src=''>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Here's the js`var pics=document.getElementsByClassName('pictures');

            function replaceimg(picsize){
                for(i=0;pics.length>i;i++){
                pics[i].src.replace(/1200|990|768|590|petit/,'img/'+picsize+'/cube'+picsize+'.jpg');
                }

            }



            function resizeimg() {
              if (window.innerWidth > 1200) {
                  replaceimg(1200);
              } else if (window.innerWidth < 1200 && window.innerWidth > 990) {
                replaceimg(990)
              } else if (window.innerWidth < 990 && window.innerWidth > 768) {

              } else if (window.innerWidth < 768 && window.innerWidth > 590) {

              } else if (window.innerWidth < 590) {
              }
            };

            resizeimg();`

Answer 1

If you're used to math, x = x + 1 does not make a lot of sense. As said in the comments, you need to assign the return value of the .replace function to your original string to overwrite it.

It takes the original string, and puts the modified string into a new object/string, that's how pretty much any programming language would do it as far as I know.

In your case this would best be visualised by Original = Original.modifyingFunction() or

Modified = Original.modifyingFunction() Original = Modified