0

I have the following JavaScript running in Chrome (demo only)

var url = window.location.href;
console.log(url + ": " + url.startsWith('http://127.0.0.1'));

If the url is http://127.0.0.1 and the startsWith returns true as expected. However, if the url is

http://127.0.0.1:3000

startsWith returns false. Anybody knows why?

On the other hand, if I have this:

var url= "http://127.0.0.1:3000"; //straight string
console.log(url + ": " + url.startsWith('http://127.0.0.1'));

startsWith returns true as expected.

How to make startsWith return true for the following code when url is http://127.0.0.1:3000

   var url = window.location.href;
   console.log(url + ": " + url.startsWith('http://127.0.0.1'));

Update 1

This is the complete code:

<head>
    <script>
        var url = window.location.href;
        console.log(url + ", " + url.startsWith('http://127.0.0.1'));
    </script>
</head>

This is the result in Console

enter image description here

The server is Tomcat (but I don't feel it is server related). The code runs in Windows 10.

Update 2

Updated code to print the type of window.location.href. Here is the updated code:

var url = window.location.href;
console.log(url + ", " + (typeof url) + ", " + url.startsWith('http://127.0.0.1'));

Here is the printout:

enter image description here

The type is string.

Update 3

The reason why I am using port 3000 is because I use "gulp + browsersync" to see how my page looks like and 3000 is the default port of browsersync. Could this be an issue?

Update 4

Tried the following code to reveal whether there is any hidden characters.

var url = window.location.href;
console.log(url + ", " + (typeof url) + ", " + url.startsWith('http://127.0.0.1'));
console.log(Array.from(url).map(c => c.charCodeAt(0)));

Still got false url.startsWith('http://127.0.0.1'). Total of 22 characters, which matches http://127.0.0.1:3000/. See this screenshot

enter image description here

Update 5

It seems to be the issue of the "gulp + browser sync". I stopped this tool and restarted Tomcat at port 3000. Then url.startsWith('http://127.0.0.1') returns true as expected for http://127.0.0.1:3000. The mystery is resolved (about what caused this issue).

If you do front-end work, I strongly recommend using this tool. Very cool.

Final Update

This issue is resolved and it was caused by gulp + browser sync I use for dev work. You can see the updates in this post to see how it was found to be the cause.

halfer
  • 19,824
  • 17
  • 99
  • 186
curious1
  • 14,155
  • 37
  • 130
  • 231
  • 2
    I cannot replicate this. I used `npx serve` which serves an index html file containing nothing but the first example code in a script element. Using `127.0.0.1:5000` the console logs `true`. – evolutionxbox Feb 28 '21 at 01:56
  • 1
    When you console.log url when you are at http://127.0.0.1:3000, does it print out http://127.0.0.1:3000, or does it print something else? – Illusion705 Feb 28 '21 at 02:04
  • 1
    ```var url = window.location.href; console.log(url);``` How is the url logged in console? Maybe isn't it 'http://localhost:3000'? –  Feb 28 '21 at 02:07
  • @Illusion705 and istar, I posted screenshot. – curious1 Feb 28 '21 at 02:08
  • 1
    Try using `npx serve .` instead of tomcat. See if you can replicate what I see? – evolutionxbox Feb 28 '21 at 02:16
  • 1
    Could you print out the type of url just so that we can confirm that it is a string? It should be, but I just want to be absolutely sure since I can't really think of any other reason this could be happening. – Illusion705 Feb 28 '21 at 02:17
  • @Illusion705, I considered that too. I tried different handling to `window.location.href`, but still got false. – curious1 Feb 28 '21 at 02:19
  • @evolutionxbox, I believe you did your test through `npx serve` and got expected result. I never touched `npx serve`. Thank you! – curious1 Feb 28 '21 at 02:21
  • 1
    Cannot replicate it either. Just to be sure, could there be hidden symbols? Did you try to construct a new string object from window.location.href and try it again? – adroste Feb 28 '21 at 02:22
  • 2
    So it's a server issue? Strange. I'd love to know what the actual cause of this behaviour was – evolutionxbox Feb 28 '21 at 02:22
  • @Illusion705, I did a test as you suggested. The type is string. – curious1 Feb 28 '21 at 02:31
  • @evolutionxbox, that is what I am thinking now. Please see my updates to the post. – curious1 Feb 28 '21 at 02:34
  • @progmem, I tried `new String(window.location.href)`, but still got false. – curious1 Feb 28 '21 at 02:35
  • 4
    @curious1 You should try logging `console.log(Array.from(url).map(c => c.charCodeAt(0))`. See if that logs any character codes that are different from what you're expecting. – JLRishe Feb 28 '21 at 02:47
  • 1
    well on my mobile device it's showing true where i used express server. – nTheta Feb 28 '21 at 02:55
  • @evolutionxbox, you are right. It is kind of server issue. Please see my latest update. Thanks! – curious1 Feb 28 '21 at 03:20
  • @JLRishe, I did your test. The issue was caused by the browser sync I use for dev. – curious1 Feb 28 '21 at 03:21
  • Why don't you just check `window.location.port.length === 0`? – Mr. Polywhirl Feb 28 '21 at 03:53

0 Answers0