在点击之前编辑href标签url？

Question

我有一个如下所示的网址：

https://url.com/a b c

正如预期的那样。但是，当用户单击此链接时，它会重定向到错误的链接，因为该链接实际上在其 url 中有下划线而不是空格。有没有办法编辑这个网址，以便在点击网址之前，空格变成下划线？网址如下所示：

https://url.com/a_b_c 当用户单击它而不是上面的内容时。以下是我的尝试：

<a target="_blank" style="font-size: 9px" href="https://url.com/{{label}}">[Details]</a>

其中label 等于a b c。我尝试了以下方法：

<a target="_blank" style="font-size: 9px" href="https://url.com/{{label.replace(" ", "_")}}">[Details]</a>

这样a b c 就会变成a_b_c，但这似乎不起作用，因为花括号实际上不能执行replace 函数。任何帮助，将不胜感激。如果可能的话，我还想在这个新替换的标签的末尾附加一些文本，使其看起来像：a_b_c_new_textThanks！

Answer 1

由于某种原因，我很难让全局正则表达式替换 .replace(/ /g, '_') 在花括号内工作。相反，我选择了来自this SO answer的解决方案。

<a ng-href="http://url.com/{{label.split(' ').join('_')}}">Click Me</a>

Here's the Codepen.

请记住，ng-href 优于 href，因为它不会在计算花括号之前抛出 404。

Answer 2

试试这个：JS Fiddle

var $link = document.getElementById('test'),
    $href = test.href;
    
test.addEventListener('mouseover', function(){
    $href = $href.replace(/%20/g, '_');
    console.log($href);
	this.href = $href;
});

<a id="test" href="https://url.com/a b c">Link Data</a>