js利用正则表达式检验输入内容是否为网址

确保输入内容为网址是 Web 开发中常见的任务之一。正则表达式是一种强大的工具，可以帮助我们检测输入内容是否符合特定的模式。JavaScript 提供了内置的正则表达式对象 RegExp，它可以用来检验输入内容是否为网址。下面是检验输入是否为网址的完整攻略。

1. 创建正则表达式对象

在使用正则表达式检验输入前，我们需要先创建一个正则表达式对象来描述要检验的模式。以下是一个检验网址格式的正则表达式示例：

const urlRegex = /^((https?):\/\/)?[a-zA-Z0-9._%+-]+(\.[a-zA-Z]{2,}){1,3}(\/[a-zA-Z0-9&-?%@./#=_]*)?$/;

这个正则表达式匹配的是以 http:// 或者 https:// 开头的 URL，其中 : 后可以没有 //。其余部分可以为数字、字母和一些特定字符，如 .、%、+、-、_ 等等。后半部分可以是 1 到 3 个点（.）和至少两个字母的组合，用来匹配域名后缀，如 .com、.edu、.cn 等等。最后一个部分可以是一些参数和路径，如 /foo/bar?baz=qux。

2. 使用正则表达式检验输入

一旦有了正则表达式对象，我们可以用 RegExp 对象的 test 方法来检验输入内容是否符合正则表达式的模式：

if (urlRegex.test(inputValue)) {
  // input is a valid URL
} else {
  // input is not a valid URL
}

这里的 inputValue 是我们想检测的输入内容，如果符合正则表达式模式，就会返回 true，否则返回 false。

示例说明

以下是两个使用正则表达式检验是否为 URL 的实例：

例1: 检验输入的内容是否为 URL

<input type="text" name="url-input" id="url-input" placeholder="请输入URL">
<button id="validate-btn">验证URL</button>

<script>
const urlRegex = /^((https?):\/\/)?[a-zA-Z0-9._%+-]+(\.[a-zA-Z]{2,}){1,3}(\/[a-zA-Z0-9&-?%@./#=_]*)?$/;
const validateBtn = document.getElementById('validate-btn');

validateBtn.addEventListener('click', () => {
  const userInput = document.getElementById('url-input').value;

  if (urlRegex.test(userInput)) {
    alert('输入的内容是一个 URL!');
  } else {
    alert('输入的内容不是一个 URL!');
  }
});
</script>

在这个实例中，我们创建了一个文本框和一个按钮。当用户输入内容并点击按钮时，我们使用上述的正则表达式检测输入内容是否为 URL。如果是，就弹出 输入的内容是一个 URL! 信息，否则弹出 输入的内容不是一个 URL!。

例2: 检验输入内容中是否包含 URL

<input type="text" name="content-input" id="content-input" placeholder="请输入内容">
<button id="check-url-btn">检查URL</button>

<script>
const urlRegex = /((https?):\/\/)?[a-zA-Z0-9._%+-]+(\.[a-zA-Z]{2,}){1,3}(\/[a-zA-Z0-9&-?%@./#=_]*)?/g;
const checkUrlBtn = document.getElementById('check-url-btn');

checkUrlBtn.addEventListener('click', () => {
  const userInput = document.getElementById('content-input').value;

  const urls = userInput.match(urlRegex);
  if (urls) {
    alert(`输入的内容中包含了 ${urls.length} 个 URL`);
  } else {
    alert('输入的内容中没有 URL');
  }
});
</script>

在这个实例中，我们同样创建了一个文本框和一个按钮。当用户输入内容并点击按钮时，我们使用正则表达式检测输入内容中是否包含 URL。如果是，就弹出 输入的内容中包含了 ${urls.length} 个 URL 信息，并返回包含 URL 的数组；如果不是，就弹出 输入的内容中没有 URL 信息。

总之，使用正则表达式检验输入内容是否为 URL 可以帮助我们保证用户输入的格式正确。在实际的 Web 开发中，我们可以根据需要定制不同的正则表达式匹配不同的 URL 格式。