时间戳

首页 > 解决方案 > JS - 如何处理文件名中的空格？

javascript - JS - 如何处理文件名中的空格？

问题描述

在文件名中添加空格会破坏代码。这有效：

<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>

这不是，该函数返回未定义：

<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>

我试过玩 JSON.stringify，没有运气。

我错过了什么？

编辑：不是重复的，问题是关于空格的。指出可能的重复实际上提供了一个答案，但如果不先问就无法知道这一点。

标签： javascripthtmlencoding

解决方案

您可以使用它encodeURI(content.uri)来确保字符串被正确编码为 URI 并与您在其中看到的内容相匹配window.src（HTML 会自动进行 URI 编码以使其成为有效的 URL）。理想情况下，坚持使用合法的 URI 并避免该问题。

<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>

这是确切发生的事情的最小说明：

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">

推荐阅读