Welche Regex passt zu allen Vorkommen von CSS-URLs?

7

Ich habe eine CSS-Datei mit einer Reihe von Hintergrundbild-URLs:

%Vor%

Und ich möchte eine Regex schreiben, die die URLs ausstreichen würde.

Also zuerst würde ich bekommen:

%Vor%

Was ich dann Bits ersetzen könnte, um sie in html <img> Blöcke zu verwandeln.

Mir geht es gut mit dem letzten bisschen, aber meine Regex-Fähigkeiten sind ein bisschen eingerostet.

Mein letzter Versuch war das: /^url\(.*?g\)$/ig

Irgendwelche Hilfe?

Übrigens habe ich das alles in Javascript gemacht, aber die Sprache sollte die Regex nicht wirklich beeinflussen.

Vielen Dank im Voraus!

Auch, um nur zu bemerken, ich kann nicht garantieren, dass die Dateien immer jpg sein werden und jpeg, png etc. sein können. Auch dass die Argumente im Hintergrund immer gleich sein werden. Deshalb möchte ich nur den URL-Teil extrahieren.

    
Ryk Waters 22.10.2013, 12:37
quelle

6 Antworten

5

Versuchen Sie:

%Vor%

Ihr Fehler bestand darin, ^ und $ in die regexp einzufügen, die sie am Anfang und am Ende der Eingabezeichenfolge verankert. Und Sie haben vergessen, das Zitat zu berücksichtigen.

    
Barmar 22.10.2013, 12:40
quelle
12

Mit einem Tool wie Regexper können wir sehen, wie Ihr regulärer Ausdruck zusammenpasst:

Wie Sie sehen, gibt es ein paar Probleme damit:

  1. Dies setzt "url (" ist am Anfang der Zeile.
  2. Dies setzt voraus, dass der Inhalt mit "g) endet", während alle Ihre Beispiele mit "g" enden).
  3. Dies setzt voraus, dass "g)" das Ende der Zeile ist.

Was wir stattdessen tun müssen, ist die Übereinstimmung von "url(" [any character] ")" . Und wir können das tun mit:

%Vor%

Beachten Sie, dass ich die Anforderung für die URL mit der Endung "g" entfernt habe, wenn der Bildtyp .gif oder ein beliebiges anderes nicht-jpg, jpeg oder png ist.

Bearbeiten: Als Seçkin M kommentiert unten: was ist, wenn wir keine anderen URLs wollen ; wie Schriften mit .ttf oder .eot? Was ist der einfachste Weg, eine zulässige Erweiterungsgruppe zu definieren?

Dafür können wir die Erweiterungen, nach denen wir suchen, vordefinieren, indem wir unsere Erweiterungen in Klammern setzen, getrennt durch | . Wenn wir beispielsweise nur gif , png , jpg oder jpeg abgleichen möchten, könnten wir Folgendes verwenden:

%Vor%

    
James Donnelly 22.10.2013 12:44
quelle
2

Verwenden Sie die folgende Regex:

%Vor%

Es müssen keine Anker ( ^ und $ ) verwendet werden, da sie die Übereinstimmung über die gesamte String-Eingabe einschränken und daher fehlschlagen würden. Um den Bildpfad separat zu erfassen, damit Sie ihn beim Erstellen Ihrer <img> -Tags problemlos verwenden (und Teilstrings vermeiden können), verwenden Sie:

%Vor%

Dies erfasst img/alert-xx.jpg in Gruppe eins.

    
Ravi Thapliyal 22.10.2013 12:40
quelle
2
%Vor%

mit jQuery:

%Vor%

Überqueren Sie mit Chrome / Firefox

Ссылка

    
l2aelba 22.10.2013 12:54
quelle
1

Ich kam zu dieser Frage von Google. Der alte, aber keine der Antworten diskutiert über data: image / * URLs. Hier ist, was ich in einem anderen Google-Ergebnis gefunden habe, dass nur http oder relative URLs übereinstimmen.

%Vor%

Ich hoffe, das würde anderen Leuten helfen, die von Suchmaschinen kommen.

    
Rizwan 12.08.2016 15:49
quelle
0

Sie haben das Schlussangebot nicht berücksichtigt

%Vor%

und Verankerung

    
Shaun Hare 22.10.2013 12:40
quelle

Tags und Links