jQuery preg replace

Question

Hi again dear comminity!

To make it short, I have a textbox, where you can paste <img> tags, which look like this: <img src="123.jpg" />.

Is there any way to make these <img> look this: <img src="img/upload/username/123.jpg" /> using jQuery .replace() or something like this ? Or should I use PHP function instead ?

I have tried to find out what jQuery .match() returns for some regual expression:

x = text.match(/\<img src="(.*)" \/>\$/);
alert(x);

,but it returns odd things, when there are more than one <img> tag.

Thank you for your help!

Well, maybe I'm saying something wrong, but still is there any way to transform one src to another using javascript for all the specified "img" tags ? — Dmitri
– Dmitri, Commented Jul 4, 2011 at 13:44

Dejan Marjanović · Accepted Answer · 2011-07-04 14:02:44Z

4

Not tested...

$('#text').change(function(){

    $('img').each(function(){
        $(this).attr('src', '/img/upload/username/' + $(this).attr('src'));
    });

});

If you would like to do this on server side with PHP you can just replace like this, no need for regex...

$text = str_replace('src="', 'src="/img/upload/username/', $text);

Or if you would like to use regexp...

$text = preg_replace('#"(.*?)\.jpg"#is', '"/img/upload/username/\\1.jpg"', $text);

edited Jul 4, 2011 at 14:02

answered Jul 4, 2011 at 13:43

Dejan Marjanović

19.4k7 gold badges54 silver badges67 bronze badges

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

2 Comments

Dmitri Over a year ago

Damn, genious solution! Thank you so much!

Dejan Marjanović Over a year ago

@Dmitri, no problem, try replacing $('img') with eg $('#preview img'), otherwise it will replace all images on page ;)

Nightwolf · Accepted Answer · 2011-07-04 13:44:23Z

1

The function you would like to use in jquery is .attr() and replace the content with whatever you like. Here is the tutorial page: http://api.jquery.com/attr/

answered Jul 4, 2011 at 13:44

Nightwolf

9612 gold badges9 silver badges23 bronze badges

1 Comment

Dmitri Over a year ago

Thank you too! Why didn't I thought of that in first place

Karolis · Accepted Answer · 2011-07-04 13:49:08Z

1

but it returns odd things, when there are more than one tag.

I think it's the problem that you are not using a lazy match. Instead of (.*) use (.*?)

answered Jul 4, 2011 at 13:49

Karolis

9,59231 silver badges41 bronze badges

Comments

K6t · Accepted Answer · 2011-07-04 13:43:32Z

0

var text    =   '<img src="img/upload/username/123.jpg" />';
x = text.match(/\<img src="(.*)" \/\>$/);
alert(x);

now u ll get??

match(/\<img src="(.*)" \/\>$/);
                          ^
                          |-----------------Becarefull about about ur special char dude....

answered Jul 4, 2011 at 13:43

K6t

1,8452 gold badges13 silver badges21 bronze badges

1 Comment

Dmitri Over a year ago

Doesn't seem to work well when there are more than 1 "img" tag!

stema · Accepted Answer · 2011-07-04 13:49:28Z

0

Your regex returns not what you expect with more than one tag, because you use a greedy quantifier here:

x = text.match(/\<img src="(.*)" \/>\$/);
                             ^

To fix this try this:

x = text.match(/\<img src="(.*?)" \/>\$/);

I am not sure about your escaping ... . Normally you don't need to escape < and I also don't understand what the \$ is good for at the end. It is not in your string. If you want to have a anchor for string end then don't escape it, but if you want to be able to insert multiple tags, you can't use it at all.

answered Jul 4, 2011 at 13:49

stema

93.5k20 gold badges110 silver badges138 bronze badges

Collectives™ on Stack Overflow

jQuery preg replace

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related