如何通过 javascript 正则表达式将图像元素与 src 匹配

Question

我想用 javascript 正则表达式替换img src 。 源 html 字符串可能未规范化，我的意思是它可能是：

<img src="aa">
<img src="aa"/>
<img src="aa"></img>
< img SRC  =  " aa "></img >

如何制作一个 javascript 正则表达式以覆盖所有条件，并替换其 src 属性。

• 我不得不使用正则表达式来匹配它。 将其添加到 dom 是不可接受的。

Answer 1

使用jQuery吗？

$('img').attr('src', '/my/new/source/value');

Answer 2

可以直接访问img元素的src属性的值：

alert(someImg.src);

该值是一个字符串，因此您可以使用字符串方法对其进行操作。 周围的标记是无关紧要的，代表元素的 innerHTML 在不同的浏览器中可能不同，所以你不应该使用它。

如果你想使用正则表达式来改变值，那么直接对相关的 DOM 属性进行操作。

你没有 state 你想用这个值做什么，但也许你想用其他一些替换它的某些部分，然后给出标记：

<img id="img0" src="image-red.jpg">

您可以使用以下方法将其更改为“image-blue.jpg”：

var img = document.getElementById('img0');
img.src = img.src.replace(/-red/,'-blue');

但您也可以只分配新值：

img.src = 'image-blue.jpg';

Answer 3

您可以制作一个不区分大小写的正则表达式，如下所示： javascript 中的不区分大小写的正则表达式

然后你必须考虑到任何地方都可能有空格：

<\s*img\s+src\s+=

然后你有一场比赛。 但是您的问题并未具体说明您要替换什么以及替换什么。

Answer 4

为什么不直接使用“element.src.match”？ 这是一个例子：

<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="pic_bulboff.gif";
  }
else
  {
  element.src="pic_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light</p>

整个例子在： http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb