Regex nào phù hợp với tất cả các lần xuất hiện của url css?

Question

tôi có một tập tin css với một loạt các url hình nền:

.alert-01 { 
    background: url('img/alert-01.jpg') center no-repeat; 
} 
.alert-02 { 
    background: url('img/alert-02.jpg') center no-repeat; 
} 
.alert-03 { 
    background: url('img/alert-03.jpg') center no-repeat; 
} 
.alert-04 { 
    background: url('img/alert-04.jpg') center no-repeat; 
} 

Và tôi muốn viết một regex rằng sẽ loại bỏ các url.

Vì vậy, ban đầu tôi sẽ nhận được:

url('img/alert-01.jpg') 
url('img/alert-02.jpg') 
url('img/alert-03.jpg') 
url('img/alert-04.jpg') 

Mà tôi thì có thể thay thế bit để biến chúng thành html <img> khối.

Tôi ổn với bit cuối cùng, nhưng kỹ năng regex của tôi hơi bị gỉ.

Lần thử gần đây nhất của tôi là: /^url\(.*?g\)$/ig

Mọi trợ giúp?

BTW Tôi đã làm điều này tất cả trong javascript, nhưng ngôn ngữ không nên ảnh hưởng đến regex thực sự.

Cảm ơn trước!

Ngoài ra, chỉ cần lưu ý, tôi không thể đảm bảo rằng các tệp sẽ luôn là jpg và có thể là jpeg, png, v.v. Ngoài ra, đối số vào nền sẽ luôn giống nhau. Do đó tại sao tôi muốn trích xuất chỉ là một phần url.

Answer 1

Hãy thử:

/url\(.*?g'\)/ig 

sai lầm của bạn đã bao gồm ^ và $ trong regexp, mà neo nó vào đầu và cuối của chuỗi đầu vào. Và bạn quên cho phép báo giá.

Answer 2

Sử dụng regex sau:

/\burl\([^)]+\)/gi 

Không có nhu cầu sử dụng neo (^ và $) khi họ sẽ hạn chế các trận đấu trên đầu vào chuỗi toàn bộ và do đó thất bại. Để nắm bắt được đường dẫn hình ảnh riêng biệt để bạn có thể sử dụng nó một cách dễ dàng (và tránh substring) khi xây dựng <img> thẻ của bạn sử dụng:

/\burl\('([^']+)'\)/gi 

này chụp img/alert-xx.jpg trong một nhóm.

Answer 3

Bạn đã được chỉ không chiếm các báo bế mạc

 
url\(.*g\'\) 

và neo

Answer 4

Sử dụng một công cụ như Regexper chúng ta có thể nhìn thấy những gì biểu hiện thường xuyên của bạn là phù hợp:

Như bạn có thể thấy có một số vấn đề với điều này:

1. Giả định "url (" là ở đầu dòng.
2. Điều này giả định nội dung kết thúc bằng "g)", trong khi tất cả các ví dụ của bạn kết thúc bằng "g") ".
3. Giả định sau "g)" là kết thúc của dòng.

Điều chúng tôi cần làm là khớp với chỉ "url(" [any character] ")". Và chúng ta có thể làm điều đó bằng:

/url\(.*?\)/ig 

Lưu ý rằng tôi đã loại bỏ các yêu cầu cho URL kết thúc bằng "g" trong trường hợp các loại hình ảnh là .gif hoặc bất kỳ khác không jpg, jpeg hoặc png.

---

Edit: Theo Seçkin M nhận xét dưới đây: gì nếu chúng ta không muốn bất kỳ url khác; chẳng hạn như phông chữ có .ttf hoặc .eot? Cách dễ nhất để xác định nhóm tiện ích mở rộng được phép là gì?

Để làm điều này, chúng tôi có thể xác định trước tiện ích mở rộng mà chúng tôi đang tìm kiếm bằng cách đặt tiện ích mở rộng của chúng tôi trong dấu ngoặc vuông, được phân cách bằng |. Ví dụ, nếu chúng ta muốn để phù hợp với chỉ gif, png, jpg hoặc jpeg, chúng ta có thể sử dụng:

/url\(.*?(gif|png|jpg|jpeg)\'\)/ig 

Answer 5

/^url\((['"]?)(.*)\1\)$/ 

với jQuery:

var bg = $('.my_element').css('background-image'); // or pure js like element.style.backgroundImage 
    bg = /^url\((['"]?)(.*)\1\)$/.exec(bg); 
    bg = bg ? bg[2] : false; 
if(bg) { 
// Do something 
} 

chéo với Chrome/Firefox

http://jsfiddle.net/KFWWv/

Answer 6

Tôi đã đưa ra câu hỏi này từ google. Cũ, nhưng không có câu trả lời nào đang thảo luận về các dữ liệu về số : hình ảnh/*. Dưới đây là những gì tôi tìm thấy trên một kết quả khác của google sẽ chỉ khớp với các url http hoặc tương đối.

/url\((?!['"]?(?:data):)['"]?([^'"\)]*)['"]?\)/g 

Tôi hy vọng điều này sẽ giúp những người khác đến từ các công cụ tìm kiếm.