How can I simplify this regular expression to select Blogger image parameters?

user_9903734 0
Viewed 79

Good morning, I wrote the following regular expression:

/s\B\d{2,4}-c|w\B\d{2,4}-h\B\d{2,4}-c|w\B\d{2,4}-h\B\d{2,4}|w\B\d{2,4}|h\B\d{2,4}|w\B\d{2,4}-c|h\B\d{2,4}-c/

That serves to select all possible situations

/s1600/
/s1600-c/
/w80-h50/
/w300-h480-c/
/w80/
/w80-c/
/h50/
/h50-c/

But I consider it to be very long and rough, how could I do better? The code I am writing is used to select the parameters of the images hosted in Blogger.

javascript regex
2 Answers

Use

/[a-z]\d{2,4}(?:-[a-z]\d{2,4})?(?:-[a-z])?/

See proof

Explanation:

NODE                     EXPLANATION
--------------------------------------------------------------------------------
  [a-z]                    any character of: 'a' to 'z'
--------------------------------------------------------------------------------
  \d{2,4}                  digits (0-9) (between 2 and 4 times
                           (matching the most amount possible))
--------------------------------------------------------------------------------
  (?:                      group, but do not capture (optional
                           (matching the most amount possible)):
--------------------------------------------------------------------------------
    -                        '-'
--------------------------------------------------------------------------------
    [a-z]                    any character of: 'a' to 'z'
--------------------------------------------------------------------------------
    \d{2,4}                  digits (0-9) (between 2 and 4 times
                             (matching the most amount possible))
--------------------------------------------------------------------------------
  )?                       end of grouping
--------------------------------------------------------------------------------
  (?:                      group, but do not capture (optional
                           (matching the most amount possible)):
--------------------------------------------------------------------------------
    -                        '-'
--------------------------------------------------------------------------------
    [a-z]                    any character of: 'a' to 'z'
--------------------------------------------------------------------------------
  )?                       end of grouping
user_113298900

I answer my question with the code that is based on the answers they gave me:

[swh]\d{2,4}(?:-[swh]\d{2,4})?(?:-c)?

I wrote "swh" because in Blogger the parameters for the images can only be s, w, h and at the end of the expression the group looks for "-c" if it exists, since it is the only one that Blogger adds or not.

With this regular expression you can select the image parameters, for example:

https://2.bp.blogspot.com/-vp696X1HSrA/XaaHyg5BeCI/AAAAAAAAEKs/1JFSJw7LfF0VvWEyifpPd3yqUg92jIG9wCLcBGAsYHQ/s1600/white-ceramic-teacup-in-white-ceramic-saucer-on-railings.jpeg

https://4.bp.blogspot.com/-bX3sMYWmk28/XaaNjJOgAII/AAAAAAAAELM/FfsSjoMMRRIMYra8H4jJcAUDekykUHnUQCLcBGAsYHQ/w450-h640/landscape-photography-of-metal-footbridge-leading-to-the-lake.jpeg

This allows us to change the parameter for another:

var items = document.querySelectorAll("img");
    
function changeParams() {
   for (var i = items.length; i--;) {
      var img = items[i];
         src = img.src.replace(/[swh]\d{2,4}(?:-[swh]\d{2,4})?(?:-c)?/, "s80-c");
         img.src = src;
    }
}
<button onclick="changeParams()">Change parameters</button>

<img src="https://2.bp.blogspot.com/-vp696X1HSrA/XaaHyg5BeCI/AAAAAAAAEKs/1JFSJw7LfF0VvWEyifpPd3yqUg92jIG9wCLcBGAsYHQ/s600/white-ceramic-teacup-in-white-ceramic-saucer-on-railings.jpeg"/>
<img src="https://4.bp.blogspot.com/-bX3sMYWmk28/XaaNjJOgAII/AAAAAAAAELM/FfsSjoMMRRIMYra8H4jJcAUDekykUHnUQCLcBGAsYHQ/w450-h640/landscape-photography-of-metal-footbridge-leading-to-the-lake.jpeg"/>
<img src="https://1.bp.blogspot.com/-JLtfBusE8vs/XYLX84sOq4I/AAAAAAAAEGY/nL1Ggut-Ny03LMhhrlB2swD5vROHb3ePQCLcBGAsYHQ/s400-c/snow-covered-mountain-night.jpeg"/>
<img src="https://2.bp.blogspot.com/-I-ADLFVdY64/XaaHO27Td9I/AAAAAAAAEKk/yhZ6b07CsZ07gxJeaSJQNvxh2fkiU0hcACLcBGAsYHQ/w500-h640-c/white-and-black-mountain.jpeg"/>

Thank you all very much, I learned a lot from you.

user_99037340
Related