Javascript 如何将regexp与onKeyDown事件中的URL进行匹配_Javascript_Regex_Events_Keyboard

Javascript 如何将regexp与onKeyDown事件中的URL进行匹配

javascript regex events keyboard

Javascript 如何将regexp与onKeyDown事件中的URL进行匹配,javascript,regex,events,keyboard,Javascript,Regex,Events,Keyboard,我正在使用此RegExp来匹配URL reMatchUrl = /(?:(?: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

我正在使用此RegExp来匹配URL

 reMatchUrl = /(?:(?: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

但是，在键入或复制/粘贴时，如何修改RegExp以匹配

输入[type=textarea]

元素中的URL？（即来自onKeyUp事件）

挑战在于等待URL完成（检查尾随空格？），并正确处理包含URL的复制/粘贴块。但如果字符串以url结尾，则不会有尾随空格

例如：

// match only the url in the string, 
// recognizing that the URL is complete
string = "hey, check this out http://www.something.com/this/is/cool?a=b"
found = string.match(reMatchUrl)
url = found && found[0]
// url = "http://www.something.com/this/is/cool?a=b"

// does NOT match the url in the string because the user 
// has NOT finished typing
string = "hey, check this out http://www.something.com/this/is/coo"
found = string.match(reMatchUrl)
url = found && found[0]
// url = null

这在纯JS中有效：

<!DOCTYPE html>
<html>
<body>
    <label for="url">set an url:</label>
    <input type="text" id="url">
    <br><br>
    <div id="result"></div>
    <script>
        // regex string
        var reMatchUrl = '(?:(?: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*)?';
        // build regex matched
        var regx = new RegExp(reMatchUrl, 'i');

        // add event listener on input
        document.getElementById('url').addEventListener("keyup", function (e) {
            // get the text in the input
            var input = document.getElementById('url').value;

            // check for a match
            var match = input.match(regx);

            // update html
            if (match) {
                document.getElementById('result').innerHTML =  'valid';
            } else {
                document.getElementById('result').innerHTML =  'not valid';
            }
        });

    </script>
</body>
</html>


设置url:



//正则表达式字符串
（3）以下：：：（（（：：：：：（：：：：：：：以下以下几几几几？）？？？？？）以下以下（（（：：：：：（（（：：：：（（：：：：：：（：：：：：：：1010 10.10岁，127）127（（（：：：：：：：：：：（（：：：：：：（（（：：：：：）））10（（：10 10 10.12；127）127）127，（（（（（：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：1010 10 10；127）10；127）10；127）127）127）127）127（（（（（（（（（：：：：：：：：：d | 2[01]\d | 22[0-3]）（？：\（？：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-\uff09]（？：\。（？：[a-z\u00a1-\uffff0-9]-*）*[a-z\u00a1-\uffff0-9]+）*（？：\（？：[a-z\u00a1-\uffff]{2,5}）（？：\d{2,5}）（？：[/？}]\S*）；
//构建正则表达式匹配
var regx=新的RegExp（reMatchUrl，'i'）；
//在输入上添加事件侦听器
document.getElementById（'url'）。addEventListener（“键控”，函数（e）{
//获取输入中的文本
var input=document.getElementById（'url'）。值；
//检查是否匹配
var match=input.match（regx）；
//更新html
如果（匹配）{
document.getElementById（'result'）。innerHTML='valid'；
}否则{
document.getElementById（'result'）。innerHTML='无效'；
}
});

它会侦听输入上的按键事件，然后在输入值与正则表达式匹配时更新状态。

因此，您希望将按键按下的键记录到一个字符串中，然后在该字符串完成后，您希望与之匹配？前面的文本是什么？您需要将其作为本机javascript吗？抱歉，我不清楚。我知道要使用JS事件，我需要的是一个RegExp，它可以丢弃额外的文本并识别键入的URL字符串的结尾。这是真的，但它侦听输入而不是URL。问题不清楚，但我不明白为什么有人希望在键入location.href时侦听它。我希望在键入输入[type=textarea]时侦听输入。