如何使用JavaScript正则表达式检测URL是否包含.co并展示验证提示

一、JavaScript检测URL中是否包含.co字符串 #

1. 仅检测任意位置包含.co #

如果不需要区分.co出现在域名、路径还是参数中，仅判断字符串是否存在，直接使用简单正则即可：

function checkHasCo(url) {
  // i修饰符忽略大小写，适配.CO等大写格式
  return /\.co/i.test(url)
}

2. 严格检测域名后缀为.co #

如果需要排除路径、参数中出现.co的干扰，仅判断域名后缀是.co，推荐使用原生URL API解析后判断，兼容性好、边界处理更完善：

function isCoDomainSuffix(url) {
  try {
    // 自动补全协议，适配用户省略http/https的输入场景
    const formattedUrl = url.startsWith('http') ? url : `https://${url}`
    const urlInstance = new URL(formattedUrl)
    // 提取域名最后一段判断后缀
    return urlInstance.hostname.split('.').pop().toLowerCase() === 'co'
  } catch (err) {
    // 非法URL直接返回false
    return false
  }
}

如果需要纯正则实现该判断，可以使用：/^(https?:\/\/)?([a-zA-Z0-9-]+\.)+co([/?#].*)?$/i

二、URL仅为.co后缀时展示验证提示的实现 #

实现逻辑如下：

• 给URL输入框绑定input/blur事件监听
• 输入内容变更/失焦时调用isCoDomainSuffix方法判断是否符合条件
• 根据判断结果控制提示文本的显示隐藏
  完整代码示例：

<!-- 页面结构 -->
<input type="text" id="urlInput" placeholder="请输入要检测的URL">
<span id="coTip" style="display: none; color: #ff4d4f; margin-left: 8px;">当前URL域名为.co后缀</span>

<script>
const urlInput = document.getElementById('urlInput')
const coTip = document.getElementById('coTip')

// 监听输入框失焦事件触发校验
urlInput.addEventListener('blur', () => {
  const inputValue = urlInput.value.trim()
  if (!inputValue) {
    coTip.style.display = 'none'
    return
  }
  const matchCo = isCoDomainSuffix(inputValue)
  coTip.style.display = matchCo ? 'inline' : 'none'
})

// 后缀检测方法
function isCoDomainSuffix(url) {
  try {
    const formattedUrl = url.startsWith('http') ? url : `https://${url}`
    const urlInstance = new URL(formattedUrl)
    return urlInstance.hostname.split('.').pop().toLowerCase() === 'co'
  } catch (err) {
    return false
  }
}
</script>

如果需求是只要URL包含任意位置的.co就展示提示，将上述代码中的isCoDomainSuffix替换为第一部分的checkHasCo方法即可

内容的提问来源于stack exchange，提问作者sable suraj