I found during my local development that ​ was being inserted into the page. Rows of it: ​​​​​​​​​
This is a basic page, hosted on a local web server via CodeKit. However this issue also occurs when I load the page direct from the pc as file://, by double clicking on it in the explorer.
Initially, the file consisted of:
<html>
<head>
<script src=".1.1.min.js"></script>
<script>
/* Some JS */
</script>
</head>
<body>
</body>
</html>
Im very confused, so I try adding a doctype to it <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
Still no luck, then through googling I notice things about charsets, so I add UTF-8. <meta charset="UTF-8"> Ohh, its gone. But not quite. Checking the source, ​ has now changed to ​ but its no longer visible on the page. Also known as Zero Width Space? (after some googling).
Why is this happening?
Final code, now with the zero width space showing in Chrome Dev Tools Inspector.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src=".1.1.min.js"></script>
<script type="text/javascript">
/* With or without JS code in these, the issue occurs */
</script>
</head>
<body>
Hello World
</body>
</html>
Progress:
I finally removed all the JS, but leaving the script tags, and managed to narrow it down to being caused by the <script></script> tags. Even when empty. Without these, the weird characters would not show, on page or in Inspector.
Why is this happening? I know best practise is to use external JS files, but why is it happening. Very strange.
Related question can be found here for reference, which helped a little, but still does not solve it as the question is different to mine: Why is "​" being injected into my HTML?
Update 1 Oops. Rookie error. Script tag is not self closing. Changed, but the issue still persists. Corrected above final code.
Update 2 Issue fixed with workaround as per my answer below. No explanation found though as to why this happened.
Update 3 Some people are still giving votes on this so I felt I had to explain. Yes, one of the answers getting high votes outlines a typo around closing the tags. Yes, it was a typo, on my part, when copying into SO. The original code did not have self closing tags. And either way, it had no effect on the OP question which is why are these random characters appearing.
I found during my local development that ​ was being inserted into the page. Rows of it: ​​​​​​​​​
This is a basic page, hosted on a local web server via CodeKit. However this issue also occurs when I load the page direct from the pc as file://, by double clicking on it in the explorer.
Initially, the file consisted of:
<html>
<head>
<script src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script>
/* Some JS */
</script>
</head>
<body>
</body>
</html>
Im very confused, so I try adding a doctype to it <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
Still no luck, then through googling I notice things about charsets, so I add UTF-8. <meta charset="UTF-8"> Ohh, its gone. But not quite. Checking the source, ​ has now changed to ​ but its no longer visible on the page. Also known as Zero Width Space? (after some googling).
Why is this happening?
Final code, now with the zero width space showing in Chrome Dev Tools Inspector.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery./jquery-2.1.1.min.js"></script>
<script type="text/javascript">
/* With or without JS code in these, the issue occurs */
</script>
</head>
<body>
Hello World
</body>
</html>
Progress:
I finally removed all the JS, but leaving the script tags, and managed to narrow it down to being caused by the <script></script> tags. Even when empty. Without these, the weird characters would not show, on page or in Inspector.
Why is this happening? I know best practise is to use external JS files, but why is it happening. Very strange.
Related question can be found here for reference, which helped a little, but still does not solve it as the question is different to mine: Why is "​" being injected into my HTML?
Update 1 Oops. Rookie error. Script tag is not self closing. Changed, but the issue still persists. Corrected above final code.
Update 2 Issue fixed with workaround as per my answer below. No explanation found though as to why this happened.
Update 3 Some people are still giving votes on this so I felt I had to explain. Yes, one of the answers getting high votes outlines a typo around closing the tags. Yes, it was a typo, on my part, when copying into SO. The original code did not have self closing tags. And either way, it had no effect on the OP question which is why are these random characters appearing.
Share edited Jul 28, 2022 at 11:03 redfox05 asked Jul 15, 2015 at 9:52 redfox05redfox05 3,6921 gold badge36 silver badges41 bronze badges 5- Annoyingly, the problem does not show in the Runnable Code Snippets. Is it to do with local code? – redfox05 Commented Jul 15, 2015 at 9:59
- 1 The "script" tag is not "self-closing" tag. Have to be "<script></script>" all the time. – paYa Commented Jul 15, 2015 at 10:03
- Thanks. Have tried that, but issue still appears. – redfox05 Commented Jul 15, 2015 at 10:06
- have you read stackoverflow./questions/2973698/… – Jaromanda X Commented Jul 15, 2015 at 10:06
- @JaromandaX, yep, thanks saw that. Thats how I know its Zero Width Space. But still cant work out why its happening. Im trying to see if its my editor (Sublime Text 2) but so far no luck. And the issue dissapears when I remove the <script></script> tags. So then it cant be the editor right? – redfox05 Commented Jul 15, 2015 at 10:10
5 Answers
Reset to default 4You have invalid (not well formed) script part of html. You have:
<script src="https://code.jquery./jquery-2.1.1.min.js" />
<script>
</script>
should be:
<script src="https://code.jquery./jquery-2.1.1.min.js">
</script>
I have pasted your code into Notepad in Windows then saved it locally and browse it from FireFox and Chrome but did not see your problem.
This may be cuased by problematic jQuery loading. Try excluding loading jQuery or try to load it locally not from CDN or any online location.
You can also check this similar question: Why are these wierd characters being inserted in Facebook iframe when using jQuery? ​
Self answering as I found no explanation for the strange appearances in the code, but I did find a way to fix the issue.
Copy all other code out of the old file, into a brand new blank file, block by block, pletely replacing it, and the issue appears to go away.
This means it must be a character encoding issue or something? Sublime is plain text, so seems odd. But, its gone now. And I think it will be one of those that cant be explained, as it cant be reproduced by others. Useful for someone else who finds this in Google in future though. Just copy the code block by block into a new file...
Solution/Workaround fix, without a reason for why it all happened in the first place... :s
I got the same issue on a Mac: Here was the issue. I copied paste from a PDF, so I had some special characters added only displayed on the browser. the solution was to delete some characters around and retype then by hand.
I just had the same bug, and after severals tests, I found the reason :
Between the two script tags, there are invisibles chars (highlighted in blue). They came from a copy-past I made to get this Adobe analytics code. Removing these invisible chars fixed the issue.