Question

我使用以下方法从文档的一部分中提取图像：

var  theImg = document.getElementById('imageDiv').innerHTML;

返回类似

的内容

theImg = <img src="http://website.com/image.jpg?&image-presets&" alt="foo" style="z-index: 1" />

如果没有参数，我怎么能抓住图像的src。那么

theImg = http://website.com/image.jpg

我愿意使用正则表达式，php或vanilla javascript。

Answer 1

未经测试，但我相信这应该可以胜任。它首先检索图像src，然后从?开始删除所有内容。

var imgDiv = document.getElementById('imageDiv');
var imgs = imgDiv.getElementsByTagName("img");
for (var i = 0; i<imgs.length; i++) {
  var theImg = imgs[i].getAttribute('src').substr(0, theImg.indexOf('?'));
  console.log(theImg);
  // Do whatever you need to with theImg. Add to an array or whatever...
}

Answer 2

由于到目前为止通过工作演示似乎没有正确和完整的答案，我将尝试一个：

var imgs = document.getElementById('imageDiv').getElementsByTagName('img');
var theImgSrc = imgs[0].src;
var loc = theImgSrc.indexOf("?");
if (loc != -1) {
    theImgSrc = theImgSrc.substr(0, loc);
}

您可以在此处看到它：http://jsfiddle.net/jfriend00/NSczd/

Answer 3

只需在图片元素本身上调用.getAttribute('src')，然后将该字符串分配给图标。

更全面地说，以下内容：

var theImg = document.getElementById('your_image').getAttribute('src');

Answer 4

抱歉，是的，这更好。

 var theImgSRC = document.getElementById('imageDiv').querySelector('img').getAttribute('src');

Answer 5

处理问题的两个部分：

var imgDiv = document.getElementById('imageDiv');

var imgs = imgDiv.getElementsByTagName("img");

var url = "";

if (imgs.length > 0) {
    var img = imgs[0];
    var questionIndex = img.src.indexOf("?");

    if (questionIndex > -1) {
        url = img.src.substring(0, questionIndex);
    } else {
        url = img.src;
    }
}

alert(url);

http://jsfiddle.net/cvhwZ/2/

Answer 6

 document.getElementById('imageDiv').querySelector("img").getAttribute('src').theImg.substr(0, theImg.indexOf('?'));

从这个用javascript抓取的html中提取img src

6 个答案: