Simple jQuery ".replace()" string not working with RegEx

Question

I trying to use .replace() to change everything between the two last slashes of this URL with "w270" but nothing happens. Am I doing something wrong? jsFiddle

<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>

// The RegEx target everything between the two last slashes
    $('.post-outer img').attr('src').replace(/[^\/]+(?=\/[^\/]*$)/, 'w270');

Adrian Brand · Accepted Answer · 2020-07-04 20:51:01Z

3

Replace returns a new string, it does not modify the original, you will need to assign the result back to the attribute.

const img = $('.post-outer img');
const url = img.attr('src').replace(/[^\/]+(?=\/[^\/]*$)/, 'w270');
img.attr('src', url);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>

answered Jul 4, 2020 at 20:51

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

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

2 Comments

Kim Santos Over a year ago

It works partially. I should mentioned that I have several <div class="post-outer"> within a <div class="post-list"> parent. Your code and Majed Badawi code above repeat the first .post-outer img on all following .post-outer img. I updated my fiddle with your code, can you take a look? Fiddle

Adrian Brand Over a year ago

You need to make your selector target the image you want to update. '.post-outer img' will target all images that are children of an element with the class 'post-outer'. $('.post-outer:first img') will target the first post. You need to explain what you want to happen.

Majed Badawi · Accepted Answer · 2020-07-04 21:17:06Z

3

Try this:

let url = $('.post-outer img').attr('src');
$($('.post-outer img')[0]).attr('src', url.replace(/[^\/]+(?=\/[^\/]*$)/, 'w270'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>
<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>

edited Jul 4, 2020 at 21:17

answered Jul 4, 2020 at 20:52

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

6 Comments

Kim Santos Over a year ago

It works partially. I should mentioned that I have several <div class="post-outer"> within a <div class="post-list"> parent. Your code and Adrian Brand code below repeat the first .post-outer img on all following .post-outer img. I updated my fiddle with Adrian code, can you take a look? Fiddle

Majed Badawi Over a year ago

@KimSantos just change the src for the first child as above

Kim Santos Over a year ago

Majed but [0] is applying the replace only in the first <div class="post-outer"><img/></div> from a <div class="post-list"> parent with 27 <div class="post-outer"><img/></div>. Any other suggestion?

Kim Santos Over a year ago

If you could take a look at my website homepage you'll see that only the first image is getting the RegEx applied with your edited code. Your first code repeat this first image on all the other images.

Majed Badawi Over a year ago

I mean what is missing from the solution? Don't you want to apply the replace to the first one only?

|

charlietfl · Accepted Answer · 2020-07-04 21:45:05Z

2

Using attr(attributeName, function) simplifies this since it exposes current value in the callback and will also loop over all matching selectors and perform same task on each instance

$('.post-outer img').attr('src', (_, curr) => curr.replace(/[^\/]+(?=\/[^\/]*$)/, 'w270'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>
<div class="post-outer">
<img src="https://1.bp.blogspot.com/-9h_QVOCOX1w/XvnuC9SucSI/AAAAAAAABJo/roFOy4Tgs64wSDtI9-dC9WyglJJdPz3fACK4BGAsYHg/w100/image.png"/>
</div>

answered Jul 4, 2020 at 21:45

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Kim Santos Over a year ago

Exactly what I need. Thanks :) Can you tell me what (_, curr) => does? Googled it and couldn't find much about it.

charlietfl Over a year ago

It's an arrow function. Almost the same as function(_,curr){/* do stuff*/})). The _ is simply a placeholder argument and is the index value of the collection which is not needed in this case ... curr is the current attribute value

Collectives™ on Stack Overflow

Simple jQuery ".replace()" string not working with RegEx

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related