将 JS 函数返回的 url 传递给 href

Question

我还是 JS 和 HTML5 的新手

所以我有一个存储在 var 中的 URL

var Base_URL = "https://www.mywebsite.com/info?username";

链接到可以访问 用户名 值的数据库，该值可以包含空格。

我把这个url解析成一个函数

function removeSpaceURL(url) {
var update = url.split(' ').join('%20');
return update;
}

这不是我所知道的最好的方法，但它的效果已经足够好。

我卡住的地方是我想将 update 返回到 href 引用中，以便我可以点击它。

    <p><a href="" onclick="removeSpaceURL(BASE_URL);return false;" >Survey</a></p> 
<script>
   var Base_URL = "https://www.mywebsite.com/info?username";

function removeSpaceURL(url) {
    var update = url.split(' ').join('%20');
    return update;}

</script>

当我在 JSfiddle 上尝试时，我收到以下错误：

{"error": "请使用 POST 请求"}

Answer 1

正确的做法是让Base_URL 首先是一个格式正确的 URL，如果它的用户名部分有空格，则不是。

但假设你坚持下去，在元素上设置属性非常简单：

<p><a id="target-link" href="">Survey</a></p> 
<script>
   var Base_URL = "https://www.mywebsite.com/info?username";
   document.getElementById("target-link").setAttribute(
        "href", encodeURI(Base_URL)
   );
</script>

注意将encodeURI 用作suggested by emiliopedrollo，而不是简单地替换空格。但话虽如此，如果 URI 的 部分 已经被正确编码并且只有用户名是问题，encodeURI 可能会双重编码。所以如果你只想替换空格：

document.getElementById("target-link").setAttribute(
    "href", Base_URL.replace(/ /g, "%20");
);

还要注意，a 元素上的onclick 中的return false 会阻止链接被关注，所以我完全放弃了onclick。