简单的 jQuery ".replace()"字符串不适用于正则表达式

Question

我试图使用.replace()用"w270"更改此URL的最后两个斜杠之间的所有内容，但没有任何反应。我做错了什么吗？js小提琴

<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');

Answer 1

replace 返回一个新字符串，它不会修改原始字符串，您需要将结果重新分配给属性。

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>

Answer 2

试试这个：

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>

Answer 3

使用attr(attributeName, function)可以简化此操作，因为它会在回调中公开当前值，并且还将遍历所有匹配的选择器并在每个实例上执行相同的任务

$('.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>