JavaScript Regex: Get string between a match and another char

Question

I have issues with the following text and Regex method. I retrieve the text from my server (from a Wordpress Database) and I want to extract the image src from it with Regex.

The string from the server looks like that:

...
[other_directives ...]
[et_pb_image admin_label="Bild" 
    src="http://url.com/wp-content/uploads/2015/08/imageXYZ.jpg"
     show_in_lightbox="off" url_new_window="off" animation="left" sticky="off" align="left" 
    force_fullwidth="off" always_center_on_mobile="on" use_border_color="off" 
    border_color="#ffffff" border_style="solid" alt="some text"]
[other_directives ...]
...

I want to search for the et_pb_image string and want to extract the text between the apostrophes of the src text in it.

Is this possible with pure Regex?

EDIT

What I tried till now (I'm a Regex beginner):

/(et_pb_image)?(src=").+[a-z]/

This returns the src but with the src="..." tag.

Did you try anything? Please post. Are you sure you need a solution in JS, and not PHP? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 2, 2015 at 9:57
@stribizhev I've updated my question with what I've tried before. Yes I need it in JS because I receive the string with AngularJS (Ionic App Development). — John Brunner
– John Brunner, Commented Sep 2, 2015 at 10:13

Wiktor Stribiżew · Accepted Answer · 2015-09-02 10:46:46Z

1

You need to be very careful with regex parsing such texts. Almost every time we have to assume something. So, in this case, let's assume you will not have ] between the et_pb_image and the src attribute. Also, we assume that the src attribute value is enclosed with ".

Then, you can use

var re = /et_pb_image[^\]]*?src="([^"]+)"/ig; 
var str = '...\n[other_directives ...]\n[et_pb_image admin_label="Bild" \n     show_in_lightbox="off" url_new_window="off" animation="left" sticky="off" align="left" \n    force_fullwidth="off" always_center_on_mobile="on" use_border_color="off" \n    src="http://url.com/wp-content/uploads/2015/08/imageXYZ.jpg"\n[other_directives ...]\n...\n\n...\n[other_directives ...]\n[et_pb_image admin_label="Bild" \n    src="http://url.com/wp-content/uploads/2015/08/imageXYZ.jpg" border_color="#ffffff" border_style="solid" alt="some text"]\n     show_in_lightbox="off" url_new_window="off" animation="left" sticky="off" align="left" \n    force_fullwidth="off" always_center_on_mobile="on" use_border_color="off" \n    \n    border_color="#ffffff" border_style="solid" alt="some text"]\n[other_directives ...]\n...\n...\n[other_directives ...]\n[et_pb_image admin_label="Bild" \n    src="http://url.com/wp-content/uploads/2015/08/imageXYZ.jpg"\n     show_in_lightbox="off" url_new_window="off" animation="left" sticky="off" align="left" \n    force_fullwidth="off" always_center_on_mobile="on" use_border_color="off" \n    border_color="#ffffff" border_style="solid" alt="some text"]\n[other_directives ...]';
var m;
 
while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    document.write(m[1] + "<br/>");
}

The regex is /et_pb_image[^\]]*?src="([^"]+)"/ig that matches

et_pb_image - literal et_pb_image
[^\]]*? - any characters other than ], as few as possible
src=" - literal src="
([^"]+) - 1 or more characters other than " (assuming the src attribute value is enclosed in double quotation marks always)
" - a literal ".

We need to get captured group 1 in all the matches, and it is impossible to achieve with string.match, we have to use exec.

answered Sep 2, 2015 at 10:46

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

3 Comments

Raad Over a year ago

Fab! Incidentally, I think it might work with just /et_pb_image[^]*?src="(.+?)"/ig. Finally it might be worth modifying your str to have different values for src=... to illustrate the code does actually extract the different instances of the match.

Wiktor Stribiżew Over a year ago

Yes, but [^] is not portable, and causes unnecessary questions :). Also, .+? is less effiecient than a negated character class.

John Brunner Over a year ago

@stribizhev thank you for your answer! works perfectly!

elad.chen · Accepted Answer · 2015-09-02 10:03:22Z

0

Using javascript:

myLongString.match( /et_pb_image.+\s+src="(.+)"/g )

Regular expression visualization

Debuggex Demo

answered Sep 2, 2015 at 10:03

elad.chen

2,4356 gold badges27 silver badges39 bronze badges

2 Comments

Raad Over a year ago

@stribizhev - just curious, why do you think this won't work?

Wiktor Stribiżew Over a year ago

If src is not on the line below, it won't work. More, if another attribute is on the same line, it will overmatch. See demo.

Collectives™ on Stack Overflow

JavaScript Regex: Get string between a match and another char

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related