We Keep Coding

React: How to load an image by path that contains special characters?

I have tried to load an image by path that contains special characters like &#^.
When I loaded the image as below, it didn't work.
<img src="file:///test/##$%/0.png"/>
So, I've tried to use encodeURI(path), encodeURIComponent(path), but it didn't work too.
How can I do this?

You have to encode each level in your path (skip the / characters):
const path = 'file:///test/##$%/0.png'
const encodedPath = 'file://' + path.replace('file://', '').split('/').map((p) => encodeURIComponent(p)).join('/')
console.log(encodedPath)
// Output: file:///test/%40%23%24%25/0.png
Use the above output for your img tag, it will be loaded.

You cannot render them as string. If you want to use them, you must write on Numeric code or JS escape.
You can find their codes from here
As your wanted,
# : #
# : #
$ : $

how to pass special character '/' through a url

My url contains a special character '/'.Example :- localhost:8080/name=asdasd 11/2/2015. When I pass this through encodeURI to the spring framework , I need to differentiate '/' which is present in my variable and the one which is the actual separator. I have tried using './*' which returns me the string after the seperator but in case I have two args in my url which contain '/' then the above solution fails. How do I solve this ??

Are you looking for like this. Encode it only values.
var myUrl ='localhost:8080/name=' + encodeURIComponent('asdasd 11/2/2015');

Insert one string into another

I need to insert 'embed' into the middle of a YouTube URL, so e.g.
https://www.youtube.com/watch?v=JDCV_cK1L1A
Needs to be modified to:
https://www.youtube.com/embed/watch?v=JDCV_cK1L1A
Using only jQuery.
Do I need to use RegEx for this? It seems the only answers I can find online are either appending / prepending, or inserting a string into x position of another string... but neither solution are appropriate for what I need to achieve

You don't need a regular expression for this. If you want to add the folder right after the domain, you can use a plain replace:
url = url.replace('youtube.com/', 'youtube.com/embed/');
If you want to add it as the last folder, you can find the last slash and insert it there:
var last = url.lastIndexOf('/');
url = url.substr(0, last) + '/embed' + url.substr(last);

Using Regex to match the middle of a path?

I have a var showNo that's an input for the beginning of a directory.
example: var showNo = "101B"
After showNo are characters that include spaces and other junk set up on the network set by another department.
example: /101B A Trip to the Beach/
I need to use sub directories inside of this one:
example: /101B A Trip to the Beach/assets/tools/
Is there a way to use regex and the variable to avoid scanning all of the directories and trying to match a substring of the first 4 characters?

var directory = str.match(/\/101B[^\/]+\//)[0];
Will match to the first directory name that starts with you variable.
More importantly the idea is as follows :
Match the first four character string literal that starts with a directory slash.
Then match any character that is not a directory slash. The "is not" is indicated by the ^.
Then repeat 2 an additional 0 or more times.
Finally match the directory slash.
I suspect you had trouble with the "anything that is NOT" character class. It is sometimes tricky but once you get it it is a very useful short cut.
--edit--
Actually on re reading I suspect you had trouble with using the variable inside the regex, correct?
That's easy enough, too, once you know how.
You can construct it as a string first:
var regex_string = "/" + showNo + "[^/]+/";
And then "compile" it into a regex which you can use as normally :
var regex_dir = RegExp(regex_string);
var directory = str.match(regex_dir);
Hope this helps!

regex matching image url with spaces

I need to match a image url like this:
http://site.com/site.com/files/images/img (5).jpg
Something like this works fine:
.replace(/(http:\/\/([ \S]+\.(jpg|png|gif)))/ig, "<div style=\"background: url($1)\"></div>")
Except if I have something like this:
http://site.com/site.com/files/audio/audiofile.mp3 http://site.com/site.com/files/images/img (5).jpg
How do I match only the image?
Thanks!
Edit: And I'm using javascript.

Assuming images will always be in the 'images' directory, try:
http://.*/images/(.*?).(jpe?g|gif|png)
If you can't assume an images directory:
http://.*/(.*?).(jpe?g|gif|png)
Group 1 and 2 should have what you want (file name and extension).
I tested the regular expression here and here and it appears to do what you want.

Proper URLs should not have spaces in them, they should have %20 or a plus '+' instead. If you had them written with those alternatives then your matching would be much easier.

Why not:
/([^/]+\.(jpg|png|gif))$

Using
http:\/\/.*\/(.*)\.(jpg|png|gif)
should do the trick if all you want is the name of the image. The first group is the file name and the second group is the file extension.

Can you assume that the urls will be space delimited, or return delimited?
As in, can you assume this input?
site.com/images/images/lol (5).jpg
site.com/images/other/radio.mp3
site.com/images/images/copter (3).jpg
If you are going to have your delimiter as part of your string to return, things get tricky. What kind of volume are you talking about here? Could you do it semi-manually at all, or does the process have to be automated?

This would be an approach:
^((\w+):)?\/\/((\w|\.)+(:\d+)?)[^:]+\.(jpe?g|gif|png)$
Mathing on the colon. (:)
In this case it's only accepted for the protocol and port (optional).
This will not match:
http://site.com/site.com/files/audio/audiofile.mp3 http://site.com/site.com/files/images/img (5).jpg
This will match (colon in second http:// removed)
"/audiofile.mp3 http/" will count as a folder in "/audio/"
http://site.com/site.com/files/audio/audiofile.mp3 http//site.com/site.com/files/images/img (5).jpg
It's not fool proof. There are other characters that are not allowed in filenames ( * | " < > )