Regex to change spaces in images into entities

Question

I'm having a lot of difficulty matching an image url with spaces.

I need to make this

http://site.com/site.com/files/images/img 2 (5).jpg

into a div like this:

.replace(/(http:\/\/([^\s]+\.(jpg|png|gif)))/ig, "<div style=\"background: url($1)\"></div>")

Here's the thread about that: http://stackoverflow.com/questions/1066697/regex-matching-image-url-with-spaces

Now I've decided to first make the spaces into entities so that the above regex will work.

But I'm really having a lot of difficulty doing so. Something like this:

.replace(/http:\/\/(.*)\/([^\<\>?:;]*?) ([^\<\>?:;]*)(\.(jpe?g|png|gif))/ig, "http://$1/$2%20$3$4")

Replaces one space, but all the rest are still spaces.

I need to write a regex that says, make all spaces between http:// and an image extension (png|jpg|gif) into %20.

At this point, frankly not sure if it's even possible. Any help is appreciated, thanks.

Trying Paolo's escape:

.escape(/http:\/\/(.*)\/([^\<\>?:;]*?) ([^\<\>?:;]*)(\.(jpe?g|png|gif))/)

Another way I can do this is to escape serverside in PHP, and in PHP I can directly mess with the file name without having to match it in regex.

But as far as I know something like htmlentities do not apply to spaces. Any hints in this direction would be great as well.

Answer 1

Try the escape function:

>>> escape("test you");
test%20you

Answer 2

Lets say you have the string variable urlWithSpaces which is set to a URL which contains spaces.

Simply go:

urlWithoutSpaces = escape(urlWithSpaces);

Answer 3

If you want to control the replacement character but don't want to use a regular expression, a simple...

$destName = str_replace(' ', '-', $sourceName);

..would probably be the more efficient solution.

Answer 4

What about urlencode() - that may do what you want.

Answer 5

On the JS side you should be using encodeURI(), and escape() only as a fallback. The reason to use encodeURI() is that it uses UTF-8 for encoding, while escape() uses ISO Latin. Same problems applies for decoding.

encodeURI = encodeURI || escape;

alert(encodeURI('image name.png'));