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
2 answers
solution1
1 ACCPTED 2015-12-11 19:26:22
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
solution2
0 2015-12-11 19:28:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript Regex url replace
Javascript Regex Replace for url
Javascript regex: replace url text link with image,but not in html tags
Regex - Replace URL with image tag
Javascript replace url segment with regex
Javascript regex replace (encoded) url
How to replace image URL(plain text) with Regex
Javascript Regex to replace a sub directory in url
javascript regex to replace url of certain length with
Replace part of URL using Regex Javascript
Related Tags