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, Apr 09 '13 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, Apr 09 '13 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, Apr 09 '13 at 12:34

score 2 · Accepted Answer · answered Apr 09 '13 at 12:33

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.

score 1 · Answer 2 · answered Apr 09 '13 at 12:31

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 09 '13 at 12:31

steveukx

4,370
19
27

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 ? – arthurmchr Apr 09 '13 at 12:36
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`. – steveukx Apr 09 '13 at 12:39

score 0 · Answer 3 · answered Apr 09 '13 at 12:36

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 09 '13 at 12:36

Sina Iravanian

16,011
4
34
45

score 0 · Answer 4 · answered Apr 09 '13 at 12:41

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

Javascript Regexp to search certain class

4 Answers4