1

I'm Getting some images from API with Backward Slashes , and when I tried to display these images on my page its working fine on Chrome but on other browsers like FireFox and IE it's not working , after some googling I get to know that I have to pass URL with forward slashes , So I tried replacing it but it's not working ..

Following is the code that I tried...

Input

var test ="http:\\www.xyz.com\xy\ab\1324\1324.jpg";
var final = test.replace(/\\/g,"/");

Output

http:/www.xyz.comxyab13241324.jpg

Please Let me know where I'm going wrong , Thank you

6
  • you should have double slash after http --- xyz.comxyab13241324.jpg Commented Jun 18, 2016 at 11:16
  • var test = "http:\\www..." means that the value of var is http:\www.... What is the actual string which is coming in? If it actually contains true backslash characters, then your regexp should work fine. Commented Jun 18, 2016 at 11:17
  • var test ="http:\\www.xyz.com\xy\ab\1324\1324.jpg"; throws error, because it is incorrectly escaped. It is not a valid string. Commented Jun 18, 2016 at 11:17
  • Why do you have URIs with backslashes? stackoverflow.com/questions/3903488/… Commented Jun 18, 2016 at 11:20
  • Sorry but the provided test data is coming from the API only so , is their any work around , with the data i have :( Commented Jun 18, 2016 at 11:29

3 Answers 3

1

This is not possible — with the provided example-string or anything similar.

\x is the first problem here. JavaScript thinks this is a Hexadecimal escape sequence, that's why the JavaScript-Interpreter is throwing an appropriate error:

Uncaught SyntaxError: Invalid hexadecimal escape sequence

And even if we take another example string: 'http:\\www.xyz.com\yy\ab\1324\1324.jpg' it will fail.
JavaScript thinks that the backslashes are there to escape something as Octal escape sequence — that is why just entering this string into a JS-Console and hitting return gives you back:

"http:\www.xyz.comyyabZ4Z4.jpg"

To visualize it even more, enter into your console: 'http:\\www.xyz.com\yy\ab\1324\1324.jpg'.split('');

You'll see that even \132 gets converted to Z.

I tried many things right now, like replacing/escaping, trying JSON.stringify, using a text-node, using CDATA inside a virtual XML-document, etc. etc. – nothing worked. If somebody finds a JavaScript-way for doing this, I'd be happy to know about it!


Conclusion

I don't know of any way for doing this inside JavaScript. There seems to be no chance.

Your only solution as I see it, is to escape it on the server-side.
In your case you will have to write a little server-script, that calls your used API and converts/escapes everything to be ready for your JS. And your JS calls this little server-script.

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

1 Comment

Thanx for the suggestion , i have done the same , i have created a server side function to escape the provided string and it worked
0

Its working fine with escaped backslashes.

var test ="http:\\\\www.xyz.com\\xy\\ab\\1324\\1324.jpg";
var final = test.replace(/\\/g,"/");

console.log(final);

3 Comments

Sorry but the provided test data is coming from the API only so , is their any work around , with the data i have to make it escaped with backslashes :(
i would look at every charater of the string and make an output of it for checking.
@Akhil RJ You seem to be confused about the difference between an actual, physical backslash character, which it what is presumably coming from the server, and a backslash inside a literal JS string, which escapes the following character. To create a JS string with an actual physical backslash, like the one coming from the server, in order to test your regexp, you need to write it with an extra backslash to escape the backslash, as the answerer has done. In other words, your regexp already works; you are just creating the test data for it incorrectly.
0

Taking a guess at piecing all of these things together:

  1. Sebastian is correct in that something like var test ="http:\\www.xyz.com\xy\ab\1324\1324.jpg"; is not valid HTML.
  2. However, no API in javascript will actually easily allow you to create such a string. So, the real question is where is the string coming from? If it is some kind of buffer being decoded then your problem lies in that library, wherever it is. Given that that has to be javascript somewhere, your best bet would be to either modify the source or monkey patch it at runtime.
  3. My spidey sense tells me that your variable is a proper string, and that your regex would work properly if inserted into your real code. However, for your test case, to create a string with the \ character, you have to escape it, so you would want var test = http:\\\\www.xyz.com

One way to check your work is to use JSON.stringify to come up with the actual value that you need to type in your source code. E.g.:

var test = 'http:\\\\xyz.com';
console.log(test); // prints "http:\\xyz.com"
console.log(JSON.stringify(test)); // prints "http:\\\\xyz.com"

5 Comments

OP uses an external API that returns something like "http:\\www.xyz.com\xy\ab\1324\1324.jpg" — so he has to monkey-patch the API-output on his server-side. Using stringify here doesn't do it.
Regardless of the external API it has to get into javascript somehow. If it is coming in as a string then the OP's string is not possible in javascript. E.g. there is no string in javascript such that console.log(myString) === http:\\xyz.com\xy Thus, it is either a (byte) buffer that is getting incorrectly parsed inside of javascript, or the actual input string is not what the OP's question is.
It's just not possible, that's also what I've found. But what do you mean by "a buffer that is getting incorrectly parsed inside of javascript"?! You have a short explanation or article/link on this?
Sure, you can see for yourself by grabbing the bytes of a loaded image on your webpage: stackoverflow.com/a/20756091/3029173 That will give you a Byte[] array which can have all kinds of representations that a string can't.
Well, I think I got you now. But nevertheless OP is not using/mentioning any buffers, just getting an URL from an API — or is he @Akhil RJ ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.