javascript - 解析图像 src 的字符串

Question

我有一个这样的字符串：

<a href="http://www.google.de/imgres" ><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQTEhUUEhQUFRQVFRQVFRQVFBQVFxQUFRUXFhQUFBUYHCggGBolHBQUITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OFBAQGiwkHyQsLCwsLCwtLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLP" /></a>

现在我想提取引号之间的 src 内容。我怎么能这样做

Answer 1

我建议不要使用正则表达式，而只是使用 DOM 方法：

function retrieveProp(htmlString, from, prop) {
    var tmp = document.createElement('div');
    tmp.innerHTML = htmlString;
    var elem = tmp.getElementsByTagName(from)[0];
    return elem[prop];
}

JS 小提琴演示。

Answer 2

首先，id为您设置img：

<a href="http://www.google.de/imgres" ><img id="your_image_id" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQTEhUUEhQUFRQVFRQVFRQVFBQVFxQUFRUXFhQUFBUYHCggGBolHBQUITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OFBAQGiwkHyQsLCwsLCwtLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLP" /></a>

然后使用以下内容：

var src = document.getElementById("your_image_id").attr('src');

我还建议您检查getElementByIdDOM 规范。

如果你不能id按照你说的那样设置它 - 你可能会通过某种选择从网页中获取所有链接（例如，使用 JQuery 按类选择），所以解决方案可能是这样的：

$('a').each(function() {
    var src = $(this).children('img').src; // here is your string
});

Answer 3

这取决于您要执行此操作的方式。

如果是字符串，则可以使用正则表达式：

/.*src=\"(.*?)\".*/.exec('<a href="http://www.google.de/imgres" ><img id="image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQTEhUUEhQUFRQVFRQVFRQVFBQVFxQUFRUXFhQUFBUYHCggGBolHBQUITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OFBAQGiwkHyQsLCwsLCwtLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLP" /></a>')

最好的方法是通过 DOM。给它一个 ID 并获取 'src' 属性。

<img src=".." id="img" />

Javascript：

document.getElementById('img').src

编辑 我现在看到您无法设置 ID，正如其他人所提到的，您可以遍历每个 img 标签。

本国的：

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++)
{
     var src = imgs[i].src
}

jQuery：

$('img').each(function ()
{
     var src = $(this).attr('src');
});

Answer 4

如果你使用jquery，你可以这样做。

function extract(data,tag,attribute){
    var html = $("<div>" + data + "</div>");
    return html.find(tag).attr(attribute);
}

您的情况中的标签是“img”，属性是“src”。

var html = $("<div>" + data + "</div>");

将字符串包装在 div 中以确保始终存在根节点。小提琴演示

如果你想提取所有的“src”并返回一个数组，试试这个

  function extract(data,tag,attribute){
        var html = $("<div>" + data + "</div>");
        var returnedData = [];
        html.find(tag).each(function(){
             returnedData.push($(this).attr(attribute));
        });
        return returnedData;
    }