在regexp上添加和删除src中的文本

Question

我想更改图片的src

var string = "/images/myimage.png";

点击按钮，我想将_hover添加到myimage（/images/myimage_hover.png），再点击按钮，点击我要删除_hover`。

有人对此有好主意吗？

Answer 1

您可以使用Element.setAttribute src属性来应用转换。

const img = document.querySelector('img');
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
 let src = img.getAttribute('src');
 
 src = img.isHover ? 
    src.replace('_hover', '') :
    src.replace('.png', '_hover.png');
 img.setAttribute('src', src);
 img.isHover = !img.isHover;
});

// Use jquery
console.log('2 + 2 =', $(2+2).get(0))

<img src="https://placehold.it/300x100/000/fff?text=image.png"><hr>
<button>Switch</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>