js判断url是否是合法http/https

8号看台

已于 2024-08-26 10:53:38 修改

阅读量45

点赞数

分类专栏：前端文章标签： javascript http 开发语言

于 2024-08-26 10:53:32 首次发布

原文链接：https://developer.aliyun.com/article/1540571

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

核心代码

function checkURL(URL) {
  var str = URL;
  //判断URL地址的正则表达式为:http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
  //下面的代码中应用了转义字符"\"输出一个字符"/"
  var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
  var objExp = new RegExp(Expression);
  if (objExp.test(str) == true) {
    return true;
  } else {
    return false;
  }
}

测试

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>未名编程</title>
</head>

<body>
网址必须以http://或者https://开头，且必须是个网址^_^！<br/>
<input type="text" id="url"/>
<button onclick="CheckUrl()">确定</button>
<script>
  function CheckUrl() {
    var url = document.getElementById("url").value;
    var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
    if (!reg.test(url)) {
      alert("这网址不是以http://https://开头，或者不是网址！");
    } else {
      alert("输入成功");
    }
  }
</script>
</body>
</html>

结果

解释

/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/

在这里插入图片描述

Javascript之中，由于所有变量都是var，因此正则表达式必须写在两个斜杠之中，/…/，然后正则表达式里面的斜杠/必须写成 /
http(s)?😕/([\w-]+.)+[\w-]+(/[\w- ./?%&=]*)?
[]表示一个检验单位，也就是某个字符可以容纳的东西。
([A-Za-z0-9-_{]+)表示，包括这个字符及其随后的字符都必须大写字母、小写字母、数字、减号-或者是}
字符+的意思是：匹配+号前面的字符1次或n次，例如：/a+/匹配"candy"中的’a’和"caaaaaaandy"中的所有’a’.
因此(([A-Za-z0-9-_{]+).)+则表示XXX.这个以点结尾的东西，必须在([A-Za-z0-9-}/])+$这个字符前面出现至少1次