时间戳

首页 > 解决方案 > 在 keyup 函数中使用通配符

javascript - 在 keyup 函数中使用通配符

问题描述

我正在尝试让 keyup 与通配符一起使用，以便它可以匹配类似的 URL，而不是确切的 URL，但是 * 不起作用，我做错了什么？

<script>
$(document).ready(function () {
    $("#fname").keyup(function () {
        if(this.value == "*.drive.google.com/*"){
            $('#input').css("display", "block");
        }else{
            $('#input').css("display", "none");
        }
    });
});
</script>

任何帮助都非常感谢。

标签： javascripthtmljquery

解决方案

您不能只将 a 传递*给相等比较，我会这样做：

let generateValidator = (str) => {
  const pieces = str.split('*');
  let regex = '';
  for (let i = 0; i < pieces.length; i++) {
      if (pieces[i] === '') {
         regex += '.+';
      } else {
          regex += pieces[i].replace(/\./, '\\.'); 
      }
  }
  let rule = new RegExp(regex);
  return (url) => {
      if (!url.startsWith('http')) {
         url = `http://${url}`;
      }
      try {
          new URL(url);
      } catch (e) {
          return false;  
      }
      return rule.test(url);
  }
}

let isValid = generateValidator('*.drive.google.com/*');

let valid = {
    "www.drive.google.com/test": isValid("www.drive.google.com/test"),
    "drive.google.com": isValid("drive.google.com"),
    "abc.drive.google.com/world": isValid("abc.drive.google.com/world"),
    "#421.drive.google.com/test": isValid("#421.drive.google.com/test")
}

console.log(valid);

然后在你的代码中，你可以这样做：

<script>
let isValid = generateValidator('*.drive.google.com/*');
$(document).ready(function () {
    $("#fname").keyup(function () {
        if(isValid(this.value)){
            $('#input').css("display", "block");
        }else{
            $('#input').css("display", "none");
        }
    });
});
</script>

推荐阅读