Question

我想用一个字段（url - link shortening）构建一个表单（VIA POST METHOD）。现在的问题是如何以及是否有可能构建一个检测URL字段值的表单是一个链接并自动缩短它而不是等待你单击Send（对于像Bit.ly这样的网站）。

一个主要的想法是，一旦该字段是一个标识符，该值是一个正确的超链接直接发送和缩短（并且该字段被缩短的链接替换）它无需等待SEND的点击。

的index.html

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a url in the input field below:</b></p>
<form> 
Url: <input type="text" onkeyup="showHint(this.value)">
</form>
<p><span id="txtHint"></span></p>
</body>
</html>

gethint.php

 <?php  
// get the q parameter from URL 

    $q = $_REQUEST["q"];

        $hint = "";

    if (!filter_var($q, FILTER_VALIDATE_URL) === FALSE) {    

    // short the link 

    $rand = rand(1,1000); 

    $hint = 'http://domain.com/'.$rand;    }

    echo $hint === "" ? "Not a valid URL" : $hint; ?>

Answer 1

我将jQuery用于事件触发/ AJAX，并使用https://gist.github.com/dperini/729294用于weburl正则表达式。

我不是在家里进行纯JavaScript AJAX调用，而是

xmlhttp.open("GET")

如果你想要发帖，正确的方法是什么？

无论如何，你唯一缺少的是

function isUrl(url){
        var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
        if(regex.test(url)){
             return regex.test(url);
        }else{
             return regex.test("http://"+url);
        }
}

所以这应该是你的新index.html

<html>
<head>
<script>
var extensions = [".aero",".biz",".cat",".com",".coop",".edu",".gov",".info",".int",".jobs",".mil",".mobi",".museum",".name",".net",".org",".travel",".ac",".ad",".ae",".af",".ag",".ai",".al",".am",".an",".ao",".aq",".ar",".as",".at",".au",".aw",".az",".ba",".bb",".bd",".be",".bf",".bg",".bh",".bi",".bj",".bm",".bn",".bo",".br",".bs",".bt",".bv",".bw",".by",".bz",".ca",".cc",".cd",".cf",".cg",".ch",".ci",".ck",".cl",".cm",".cn",".co",".cr",".cs",".cu",".cv",".cx",".cy",".cz",".de",".dj",".dk",".dm",".do",".dz",".ec",".ee",".eg",".eh",".er",".es",".et",".eu",".fi",".fj",".fk",".fm",".fo",".fr",".ga",".gb",".gd",".ge",".gf",".gg",".gh",".gi",".gl",".gm",".gn",".gp",".gq",".gr",".gs",".gt",".gu",".gw",".gy",".hk",".hm",".hn",".hr",".ht",".hu",".id",".ie",".il",".im",".in",".io",".iq",".ir",".is",".it",".je",".jm",".jo",".jp",".ke",".kg",".kh",".ki",".km",".kn",".kp",".kr",".kw",".ky",".kz",".la",".lb",".lc",".li",".lk",".lr",".ls",".lt",".lu",".lv",".ly",".ma",".mc",".md",".mg",".mh",".mk",".ml",".mm",".mn",".mo",".mp",".mq",".mr",".ms",".mt",".mu",".mv",".mw",".mx",".my",".mz",".na",".nc",".ne",".nf",".ng",".ni",".nl",".no",".np",".nr",".nu",".nz",".om",".pa",".pe",".pf",".pg",".ph",".pk",".pl",".pm",".pn",".pr",".ps",".pt",".pw",".py",".qa",".re",".ro",".ru",".rw",".sa",".sb",".sc",".sd",".se",".sg",".sh",".si",".sj",".sk",".sl",".sm",".sn",".so",".sr",".st",".su",".sv",".sy",".sz",".tc",".td",".tf",".tg",".th",".tj",".tk",".tm",".tn",".to",".tp",".tr",".tt",".tv",".tw",".tz",".ua",".ug",".uk",".um",".us",".uy",".uz", ".va",".vc",".ve",".vg",".vi",".vn",".vu",".wf",".ws",".ye",".yt",".yu",".za",".zm",".zr",".zw"];

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
       clearTimeout (timer);
       timer = setTimeout(callback, ms);
    };
 })();

function isUrl(url){
        var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
        if(regex.test(url)){
             return regex.test(url);
        }else{
             return regex.test("http://"+url);
        }
}
function showHint(str) {
 delay(function(){
      str = str.toLowerCase();
      var dot = str.lastIndexOf(".");
      var extension = str.substr(dot);
      extension = extension.split('/')[0];
      var found = $.inArray(extension, extensions) > -1;
         if (!isUrl(str)||!found) { 
             document.getElementById("txtHint").innerHTML = "";
             return;
         } else {
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.onreadystatechange = function() {
                 if (this.readyState == 4 && this.status == 200) {
                     document.getElementById("txtHint").innerHTML = this.responseText;
                 }
             };
             xmlhttp.open("GET", "gethint.php?q=" + str, true);
             xmlhttp.send();
         }
     }, 500)
 }
</script>
</head>
<body>

<p><b>Start typing a url in the input field below:</b></p>
<form> 
Url: <input type="text" onkeyup="showHint(this.value)">
</form>
<p><span id="txtHint"></span></p>
</body>
</html>

编辑：假设您将开始输入http://www.example.net .. AJAX将触发＆＃34; http://www.example.ne＆＃34;然后再添加最后一个字母。为避免这种情况，您可以尝试更改＆＃34;而不是＆＃34; keyup＆＃34;事件

edit2：现在检查有效域扩展名列表

edit3：现在等待半秒才发布结果。

edit4：检查扩展时的小疏忽，修复了 extension = extension.split（＆＃39; /＆＃39;）[0];

此外，如果您想让用户在没有＆＃34; http：//＆＃34;的情况下编写网址。类似的，你需要一个编辑过的正则表达式，或者写一个小的hack，在你将它发送到＆＃34; isUrl（）＆＃34;之前将它添加到你的字符串中。

通过PHP和AJAX（bit.ly）自动链接短路

1 个答案: