2013-02-18 14 views
9

Próbuję dopasować wszystkie elementy obrazów jako ciągi,Extract obraz src z ciągiem

To jest mój regex:

html.match(/<img[^>]+src="http([^">]+)/g); 

To działa, ale chcę, aby wyodrębnić src wszystkich obrazki. Więc kiedy wykonać wyrażenia regularnego na ten ciąg:

<img src="http://static2.ccn.com/ccs/2013/02/img_example.jpg />

zwraca:

"http://static2.ccn.com/ccs/2013/02/img_example.jpg"

+4

nie wolno używać regex do analizowania html. – Mathletics

+0

Mam do czynienia z regex –

+4

@ Tomirammstein, dlaczego musisz to zrobić z wyrażeniem regularnym, gdy JavaScript ma wbudowany DOM? –

Odpowiedz

19

Musisz użyć grupy przechwytywania () wyodrębnić adresy URL, a jeśli chce dopasować globalnie g, czyli więcej niż jeden raz, przy użyciu grupy przechwytywania, trzeba użyć exec w pętli (match ignoruje przechwytywanie grupy przy dopasowywaniu globalnym).

Na przykład

+0

Zrobiono to zamiast tego. W przeciwnym razie nie będzie zbierać wszystkich obrazów./] + src = "([^"> +]/g – juminoz

+3

kilka razy znacznik img może mieć wysokość lub inną wartość atr po "src" attr.So regex powinno być rex =/] + src = "? ([^ "\ s] +)"? [^>] * \ />/g; –

+4

wydaje się, że to wyrażenie nie działa na wszystkich znacznikach img, ale działa to/] * \/([^ ">] *?)) ". *?>/g; – norman784

0

Można uzyskać dostęp do wartości src użyciu grupy

            |->captured in group 1 
            ----------------------------------     
var yourRegex=/<img[^>]+src\s*=\s*"(http://static2.ccn.com/ccs[^">]+)/g; 
var match = yourRegex.exec(yourString); 
alert(match[1]);//src value 
1

Może to jest to, czego szukasz:

To, co zrobiłem, nieznacznie zmodyfikowałem twoje wyrażenie, a następnie użyłem funkcji exec, aby uzyskać tablicę dopasowanych ciągów. jeśli masz więcej niż 1 mecz pozostałe mecze będą na results[2], results[3] ...

var html = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />'; 

var re = /<img[^>]+src="http:\/\/([^">]+)/g 
var results = re.exec(html); 

var source = results[1]; 
alert(source); 
5
var myRegex = /<img[^>]+src="(http:\/\/[^">]+)"/g; 
var test = '<img src="http://static2.ccn.com/ccs/2013/02/CC_1935770_challenge_accepted_pack_x3_indivisible.jpg" />'; 
myRegex.exec(test); 
+0

Dziękuję za odpowiedź. Pomogło mi to. Chcę tylko dodać: 'var src = myRegex.exec (test); console.log ('SRC:' + src [1]); ' – akelec

3

Jak Mathletics wspomniano w komentarzu, istnieją inne, bardziej proste sposoby na odzyskanie src z atrybutem znaczniki <img>, takie jak pobieranie odwołania do węzła DOM za pomocą identyfikatora, nazwy, klasy itp., a następnie po prostu za pomocą odwołania do wyodrębnienia potrzebnych informacji. Jeśli trzeba to zrobić dla wszystkich elementów <img>, można zrobić coś takiego:

var imageTags = document.getElementsByTagName("img"); // Returns array of <img> DOM nodes 
var sources = []; 
for (var i in imageTags) { 
    var src = imageTags[i].src; 
    sources.push(src); 
} 

Jednakże, jeśli masz jakieś ograniczenie zmuszając do użyć wyrażenia regularnego, a potem pozostałe odpowiedzi udzielane będzie działać dobrze.