在前端开发中，我们经常需要检查用户输入的字符串是否为有效的URL。本文将介绍如何使用JavaScript来进行URL验证，并提供示例代码和深入的解释。
步骤
要验证JavaScript字符串是否为URL，请按照以下步骤执行：
- 创建一个正则表达式：用于匹配URL模式的正则表达式可以通过以下方式创建：
const urlPattern = new RegExp('^(https?:\\/\\/)?'+
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+
'((\\d{1,3}\\.){3}\\d{1,3}))'+
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
'(\\?[;&a-z\\d%_.~+=-]*)?'+
'(\\#[-a-z\\d_]*)?$','i');- 使用正则表达式验证字符串： 一旦您有了一个正则表达式，就可以将其用于验证字符串。
function isValidUrl(url) {
return urlPattern.test(url);
}解释
上面的urlPattern正则表达式是包括以下几个部分:
^- 字符串必须以这个开始(https?:\\/\\/)?- 可选且必须以“http://”或者“https://”开头的协议部分(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}- 一个或多个包含字母、数字和连字符的子域名，后跟一个顶级域名，例如.com或.org((\\d{1,3}\\.){3}\\d{1,3})- 或者IP地址部分（例如：192.168.0.1）(\\:\\d+)?- 可选且必须是“:”后面跟着一些数字，表示端口号(\\/[-a-z\\d%_.~+]*)*- 可选且必须是以/开头的路径部分(\\?[;&a-z\\d%_.~+=-]*)?- 可选且必须是以?开头的查询参数部分(\\#[-a-z\\d_]*)?$- 可选且必须是以#开头的锚点部分
在isValidUrl函数中，我们使用test方法将URL与正则表达式进行匹配。如果它匹配成功，则返回true，否则返回false。
示例代码
下面是如何在HTML文本输入框中使用isValidUrl函数来验证用户输入的URL：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------- ---------------
-------
------
------ -------------------- - ------------
------ ----------- --------------
------- -----------------------------------------
-- ----------------
--------
----- ---------- - --- ---------------------------
---------------------------------------------------
------------------------------
----------------------------------
---------------------------
--------------------------
-------- --------------- -
------ ---------------------
-
-------- ------------- -
----- ----- - ------------------------------------
----- ------ - ----------------------------------
-- ------------------------- -
---------------- - ------ -----
- ---- -
---------------- - -------- -----
-
-
---------
-------
-------在此示例中，我们创建了一个文本输入框和一个
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11359
