Question

我正在编写一个chrome扩展程序，允许用户修改特定网站上的内容。我希望用户能够使用通配符指定这些网站，例如http://*.google.com或http://google.com/*

我找到了以下代码

currentUrl = "http://google.com/";
matchUrl = "http://*.google.com/*";
match = RegExp(matchUrl.replace(/\*/g, "[^]*")).test(currentUrl);

但它有一些问题。

http://test.google.com/是匹配

http://google.com/不匹配

http://test.google.com不匹配

http://.google.com/是匹配

澄清：

http://google.com不匹配，这才是真正的问题。

那我怎样才能创建一个JavaScript代码片段来检查是否匹配正确？

Answer 1

我建议将URL解析为协议，基本部分和其余部分，然后使用*重新构建基本部分内的(?:[^/]*\\.)*验证正则表达式，否则使用(?:/[^]*)?。此外，您必须使用.replace(/[?()[\]\\.+^$|]/g, "\\$&")转义所有其他特殊字符。您还需要锚点（^用于字符串的开头，$用于字符串位置的结尾）以匹配整个字符串。不区分大小写的/i修饰符只是使模式区分不敏感的一个奖励。

因此，对于这个确切的matchUrl，正则表达式看起来像

/^http:\/\/(?:[^\/]*\.)*google\.com(?:\/[^]*)?$/

请参阅regex demo

＆＃13;

var rxUrlSplit = /((?:http|ftp)s?):\/\/([^\/]+)(\/.*)?/; 
var strs = ['http://test.google.com/', 'http://google.com/','http://test.google.com', 'http://.google.com/','http://one.more.test.google.com'];
var matchUrl = "http://*.google.com/*";
var prepUrl = "";
if ((m=matchUrl.match(rxUrlSplit)) !== null) {
	prepUrl = m[1]+"://"+m[2].replace(/[?()[\]\\.+^$|]/g, "\\$&").replace(/\*\\./g,'(?:[^/]*\\.)*').replace(/\*$/,'[^/]*');
  if (m[3]) { 
      prepUrl+= m[3].replace(/[?()[\]\\.+^$|]/g, "\\$&").replace(/\/\*(?=$|\/)/g, '(?:/[^]*)?');
   }
}
if (prepUrl) {
//  console.log(prepUrl); // ^http://(?:[^/]*\.)*google\.com(?:/[^]*)?$
  var rx = RegExp("^" + prepUrl + "$", "i");
  for (var s of strs) {
    if (s.match(rx)) {
    	console.log(s + " matches!<br/>");
    } else {
    	console.log(s + " does not match!<br/>");
    }
  }
}

＆＃13;

Answer 2

使用此matchUrl

matchUrl = "http://*.google.com/*";

RexExp是这样的

"http://.*.google.com/.*"

因此，请尝试在正则表达式匹配中用。* 替换用户输入的 *

您可以使用this工具进行测试

Javascript匹配带通配符的网址 - Chrome扩展程序

2 个答案: