JS - How to deal with space in file names?

Question

Adding a space to a filename breaks the code. This works:

<html>
<img id="window-1" src="http://url.net/demo1.png">
<img id="window-2" src="http://url.net/demo2.png">

<script>
    const content = { uid: 'image-1', uri: 'http://url.net/demo1.png' };
    const mediaWindows = [document.getElementById('window-1'), document.getElementById('window-2')];

    function getPlayedWindow(playedContent) {
        return mediaWindows.find((window) => window.src === playedContent)
    }

    console.log(getPlayedWindow(content.uri));        
            
</script>

This doesn't, the function returns undefined:

<html>
<img id="window-1" src="http://url.net/demo 1.png">
<img id="window-2" src="http://url.net/demo 2.png">

<script>
    const content = { uid: 'image-1', uri: 'http://url.net/demo 1.png' };
    const mediaWindows = [document.getElementById('window-1'), document.getElementById('window-2')];

    function getPlayedWindow(playedContent) {
        return mediaWindows.find((window) => window.src === playedContent)
    }

    console.log(getPlayedWindow(content.uri));        
            
</script>

I tried playing with JSON.stringify, no luck.

What am I missing?

EDIT: Not a duplicate, the question is about spaces. pointing to the possible duplication actually provides an answer, but one can't know that without asking first.

`window.src === encodeURI(playedContent)` A better way to deal with whitespace in filenames is to not have it in the first place ;) — , Sep 23 '19 at 06:27
The `arrays` tag does not seem to be related to the problem. Also, there are parts of your code that are not clear to be related to the problem. Please edit these out. — Rashad Saleh, Sep 23 '19 at 06:36
Also, your question doesn't make it clear whether the problem is happening in the HTML also or only the JavaScript. — Rashad Saleh, Sep 23 '19 at 06:37
@ChrisG file names are dynamic and uploaded by users, so can't assure not using them — Yigal, Feb 02 '20 at 10:32

ggorlen · Accepted Answer · 2019-09-23T06:52:15.737

You can use encodeURI(content.uri) to ensure that the string is correctly encoded as a URI and will match what you see in window.src (the HTML is URI-encoded automatically to make it a valid URL). Ideally, stick to legal URIs and avoid the issue.

<html>
<img id="window-1" src="http://url.net/demo 1.png">
<img id="window-2" src="http://url.net/demo 2.png">

<script>
    const content = { uid: 'image-1', uri: 'http://url.net/demo 1.png' };
    const mediaWindows = [document.getElementById('window-1'), document.getElementById('window-2')];

    function getPlayedWindow(playedContent) {
        return mediaWindows.find((window) => window.src === playedContent)
    }

    console.log(getPlayedWindow(encodeURI(content.uri)));        

</script>

Here's a minimal illustration of exactly what's going on:

const uri = "http://url.net/demo 1.png";

console.log("from document:", document.querySelector("img").src); 
console.log("unencoded string URI:", uri); 
console.log("encoded string URI:", encodeURI(uri));

<img src="http://url.net/demo 1.png">

score 0 · Answer 2 · answered Sep 23 '19 at 06:31

Use encodeURI

const content = { uid: 'image-1', uri: 'http://url.net/demo 1.png' };
    const mediaWindows = [document.getElementById('window-1'), document.getElementById('window-2')];

    function getPlayedWindow(playedContent) {
        return mediaWindows.find((window) => window.src === encodeURI(playedContent))
    }

    console.log(getPlayedWindow(content.uri));

<img id="window-1" src="http://url.net/demo 1.png">
<img id="window-2" src="http://url.net/demo 2.png">

score -1 · Answer 3 · answered Sep 23 '19 at 06:27

-1

Whitespace is url encoded with '%20'. You can encode whitespace in javascript with 'encodeURI' or 'encodeURIComponent'.

answered Sep 23 '19 at 06:27

Johann Alfred Verdant Anderson

29
4

not encodeURICompoment - that messes up the `/` for a start – Jaromanda X Sep 23 '19 at 06:29

JS - How to deal with space in file names?

3 Answers3