Regex to replace Image URL in Javascript

Question

I have sets of Images like this

http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s640/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s500-p/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s320-w160/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s320/camera-541213_1920.jpg

You can see image have s640, s500-p, s320-w160 which specify image height and width.

I want to replace image url (s640, s500-p, s320-w160) to (s1600) using help of regex like this

http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s1600/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s1600/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s1600/camera-541213_1920.jpg
http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s1600/camera-541213_1920.jpg

Can any tell me how can I do that

But at least you can show us what you tried so that we can fix — Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
– Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ, Commented Dec 11, 2015 at 19:24
@TareqMahmood image.attr('src').replace(/s\B\d{2,4}/,'s1600') — Victoria Gomez
– Victoria Gomez, Commented Dec 11, 2015 at 19:25

Scottux · Accepted Answer · 2015-12-11 19:32:26Z

1

You could make a function and split on the path segments:

// path: The image url
// replacement: The replacement string
function replaceSize(path, replacement) {
    var parts = path.split('/'); // break the string to an array
    parts[7] = replacement;      // this is the path segment to replace
    return parts.join('/');      // glue the array back into a string
}
// Test the function
console.log(replaceSize('http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s640/camera-541213_1920.jpg', 's1600'));
// output: http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s1600/camera-541213_1920.jpg

edited Dec 11, 2015 at 19:32

answered Dec 11, 2015 at 19:26

Scottux

1,5771 gold badge11 silver badges22 bronze badges

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

Comments

Mahmudur Rahman · Accepted Answer · 2015-12-11 19:28:35Z

Use JQuery:

<script type="text/javascript">
    $("img").each(function(key, val){
        var src = $(this).attr('src').replace(/s640|s500-p|s320-w160|s320/g, "s1600");
        $(this).attr('src', src);
    });
</script>

Here is the full code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

    <img src="http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s640/camera-541213_1920.jpg" alt="" />
    <img src="http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s500-p/camera-541213_1920.jpg" alt="" />
    <img src="http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s320-w160/camera-541213_1920.jpg" alt="" />
    <img src="http://1.bp.blogspot.com/-swqrzpzvh7s/Vi6Os2n7NGI/AAAAAAAABRs/W9uC8EJldt0/s320/camera-541213_1920.jpg" alt="" />



    <script type="text/javascript">

        $("img").each(function(key, val){
            var src = $(this).attr('src').replace(/s640|s500-p|s320-w160|s320/g, "s1600");
            $(this).attr('src', src);
        });

    </script>

</body>
</html>

Collectives™ on Stack Overflow

Regex to replace Image URL in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related