Выбор изображения URL из HTML с помощью регулярных выражений JavaScript

Question

Я хотел бы выбрать исходный URL изображения из HTML-кода, используя регулярное выражение javascript. Я использую его для упрощения использования изображений picasaweb на других веб-сайтах. Я довольно новичок в этом, и я построил регулярное выражение, используя http://www.regular -expressions.info / javascriptexample.html , и там это работает как шарм, но не в моем собственном сценарии. Может кто-нибудь указать мне на ошибку в моем сценарии?

function addImage() {
var picasaDump=prompt("Copy the picasa link");
if (picasaDump!=null && picasaDump!="")
{
    var regMatch = new RegExp("http:\/\/\S\.[jJ][pP][eE]?[gG]");
    var imageLink = regMatch.exec(picasaDump);
    if(imageLink == null) {
        alert("Error, no images found");
    } else if(imageLink.length > 1) {
        alert("Error, multiple images fount");
    } else {
        further parsing...
    }
}
}

РЕДАКТИРОВАТЬ: Некоторые образцы ввода

<a href="http://picasaweb.google.com/lh/photo/NHH78Y0WLPAAzIu0lzKlUA?feat=embedwebsite"><img src="http://lh3.ggpht.com/_ADW_3zOQhj8/TGgN4bXtfMI/AAAAAAAABCA/w6M-JKzNtBk/s144/DSC_2132.jpg" /></a>

Answer 1

Вот еще один поток SO, в котором говорится о подходящем регулярном выражении для этого: Regex для проверки правильности URL-адреса, заканчивающегося на .jpg, .png или .gif

Независимо от используемого вами регулярного выражения, простой однострочный текст для проверки строки:

({Regular_Expression}>/gi).test({String_To_Test}) 

For e.g. 
(/http:\/\/.+?\.jpg|jpeg/gi).test("http://www.google.com/image.jpg")

Answer 2

в этой строке

var regMatch = new RegExp("http:\/\/\S\.[jJ][pP][eE]?[gG]"); 

вы экранируете символы в строке, а не в регулярном выражении.также \S будет соответствовать только одному символу.это должно быть

var regMatch = new RegExp("http:\\/\\/\\S+\\.[jJ][pP][eE]?[gG]"); 

Answer 3

Это было бы лучше всего реализовано с опережением. Однако, поскольку JavaScript не поддерживает просмотр в обратном направлении, мы должны имитировать его путем обращения строки и использования упреждающего просмотра.

String.prototype.reverse = function () {
    return this.split('').reverse().join('');
};

var input = '<a href="http://picasaweb.google.com/lh/photo/NHH78Y0WLPAAzIu0lzKlUA?feat=embedwebsite"><img src="http://lh3.ggpht.com/_ADW_3zOQhj8/TGgN4bXtfMI/AAAAAAAABCA/w6M-JKzNtBk/s144/DSC_2132.jpg" /></a>'
var matches = input.reverse().match(/(gepj|gpj|gif|png)\..+?\/\/:ptth(?=\"\=crs)/g);

Это вернет массив URL обращенных изображений, поэтому вам придется их перевернуть.

for (i = 0; i < matches.length; i++)
{
    matches[i] = matches[i].reverse();
}

Если вам известен формат ссылок на ваши изображения, вы можете указать более прогнозируемые значения, например:

var matches = input.reverse().match(/(gepj|gpj|gif|png)\..+?\/\/:ptth(?=\"\=crs gmi)/g);

Что будет совпадать только в том случае, если сразу за <img следует src.

Воспроизведение с оглядкой на спину, взятое с Стивен Левитан

Answer 4

Вы можете попробовать

var regMatch = new RegExp("http:\/\/.+?\.jpg|jpeg","gi");