CODEWITHSUNDEEP
javascriptjqueryregex
Victoria Gomez
Victoria Gomez

Reputation: 23

Regex to replace Image URL in Javascript

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

Upvotes: 0

Views: 323

Answers (2)

Scottux
Scottux

Reputation: 1577

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

Upvotes: 1

Mahmudur Rahman
Mahmudur Rahman

Reputation: 765

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>

Upvotes: 0

Related Questions