Javascript Regexp to search certain class

Question

I have a simple Regexp with the following code :

<img[^>]+src="([^">]+)"

This regexp allows me to get the src of each img of my document. What I am trying to do without any success, is to add a class condition to it, something that will find all the src of my images which have a certain class. I tried something like that :

<img[^>]+src="([^">]+)" *class="name_of_my_class"

but this only works if the class is inserted after the src, and i need the regexp to work in reverse sens to.

Thanks for any helps !

Are you only trying to get the src attribute from img tags of a certain class? Why do you need regex to do this? — Anthony Forloney
– Anthony Forloney, Commented Apr 9, 2013 at 12:28
You might be better off using an HTML parser instead - especially if you need to add or modify attributes. For example, I use Ruby and Nokogiri. Using RegEx is not the way to go. — RidingTheRails
– RidingTheRails, Commented Apr 9, 2013 at 12:28
My mistake, I forget to precise that I'm parsing a string and not directly the DOM (I parse an Ajax response, before injecting it) — arthurmchr
– arthurmchr, Commented Apr 9, 2013 at 12:34

Loamhoof · Accepted Answer · 2013-04-09 12:33:59Z

2

It's already been said that you shouldn't use regex blablabla...
Still, I can deal with my conscience if I make you learn something about regular expressions at the same time, so, let's do it. The key tool here is the lookahead.

/<img(?=[^>]+class="name_of_my_class")[^>]+src="([^">]+)"/

The lookahead allows you check something ahead without moving the pointer inside your string. So basically, you check something ahead.

answered Apr 9, 2013 at 12:33

Loamhoof

8,29329 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

steveukx · Accepted Answer · 2013-04-09 12:31:46Z

1

If you need to traverse the document, searching for classes and returning attributes, you may find it is easier to use the DOM querying tools:

var imgSrcArray = [].slice.call(document.querySelectorAll('img.myClassName'),0)
                       .map(function(img) {
                          return img.getAttribute('src');
                       });

(example assumes a modern browser with querySelector and Array.prototype.map enabled)

answered Apr 9, 2013 at 12:31

steveukx

4,34321 silver badges27 bronze badges

2 Comments

arthurmchr Over a year ago

Thank for your response @steveukx. The fact is that I'm parsing a string (an ajax response) and not directly the DOM. Can this work ?

steveukx Over a year ago

Assuming that the string is valid HTML, you can create an element, set the content as the innerHTML and then query on that element: var el = document.createElement('div'); el.innerHTML = myHtmlString; then replace the document in the example above with el.

Sina Iravanian · Accepted Answer · 2013-04-09 12:36:27Z

0

Considering both situations might be a solution, class either before or after the src attribute:

<img[^>]+?((src="([^">]+)"[^>]*?class="name_of_my_class")|(class="name_of_my_class"[^>]*?src="([^">]+)"))[^>]*>

answered Apr 9, 2013 at 12:36

Sina Iravanian

16.3k4 gold badges37 silver badges46 bronze badges

Comments

Lazy Senior · Accepted Answer · 2013-04-09 12:41:40Z

0

Hmm i dont really know how exactly do this in regexp but i think you can do it as followed :

<img 
    {any charakter except >}* 
    (
        {check for class} {any charakter except >}* {get src} 
        ||
        {get src} {any charakter except >}* {check for class}
    )
    {any charakter except >}*
>

*means 0 or multiple times

answered Apr 9, 2013 at 12:41

Lazy Senior

1711 silver badge8 bronze badges

Collectives™ on Stack Overflow

Javascript Regexp to search certain class

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related