使用正则表达式更改img src

Use regex to change img src

本文关键字：img src 正则表达式      更新时间：2023-09-26

我想根据单击的字母按钮更改图像源。我想我需要使用正则表达式，但我不确定它应该是什么样子。

<img id="logo_layer2" src="images/logo/logo_compass_a_layer2_red.png">
<ul id="letters">
    <li>A</li>
    <li>B</li>
    <li>C</li>
...
</ul>

"a_layer2"部分应更改为"b_layer2"、"e_layer2"，依此类推

events: {
    "click #letters li" : "change_letter"
},
change_letter: function(e) {
    var letter = $(e.target).text();       
    var newimg = /images'/logo'/logo_'w*_'w{1}_layer'd_'w*.png/.replace((/'w{1}/,letter));
    $("#logo_layer2").attr("src",newimg);
},

http://jsfiddle.net/uLqBY/

尝试

小提琴演示 

$('#letters li').click(function(){
    var txt =$(this).text().toLowerCase();
    $('#logo_layer2').attr('src',function(_,old_src){
        return old_src.replace(/_'w_/g,'_'+txt+'_');
    });
});

小提琴演示

$('#letters li').click(function(){
    var txt =$(this).text().toLowerCase();
    $('#logo_layer2').prop('src',function(_,old_src){
        return old_src.replace(/_'w_/g,'_'+txt+'_');
    });
});

.pr（）

读取.pr（）与.attr（）

要改进正则表达式，您可以使用以下正向lookbacking和lookahead：

(?<=images'/logo'/logo_'w*_)'w{1}(?=_layer'd_'w*.png)

这将只匹配您想要更改的字母，在这种情况下，它是src中的"a"。

至于jquery/js，我不知道。

相关文章：