javascript - 将输入到输入文本字段中的 url 附加到锚点，然后允许用户单击它并按照他们输入的 url

Question

我想要一个文本字段，人们可以在其中输入一个值。然后我想让一个 href 打开他们输入的 url。

非常类似于这个小提琴，但我希望 href 只是用户键入的输入值。

小提琴：

http://jsfiddle.net/BMDKr/

  <a href="/base/url" target="blank"  id="baseUrl">Link Text</a>
  <input type="text" id="appendUrl" />






$(function() {
$('#baseUrl').click( function() {
    window.location = $(this).attr('href') + '/' + $('#appendUrl').val();
    return false;
});
});

Answer 1

编辑：如果他们输入了外部 URL，要回答您的问题，您将使用此处找到的功能：Fastest way to detect external URLs?

function isExternal(url) {
    var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") !== location.host) return true;
    return false;
}

结合当前代码，这使得：

function isExternal(url) {
    var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") !== location.host) return true;
    return false;
}

$(function () {
    // When the input field changes value
    $('#text').blur(function(){

        // Check if the link is external:
        if(isExternal($('#text').val())){
            // Set the attribute 'href' of the link to the value of the input field
            $('#link').attr('href', $('#text').val());
        }
        else
        {
            // Show an error if it's not external
            alert('Link is not external!');
        }
    });
});

<input type="text" id="text"> <a href="#" id="link">Link</a>

小提琴：http: //jsfiddle.net/BMDKr/6/