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

问题描述

我正在编写一个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/ 是匹配

那么我怎么才能创建一个JavaScript代码片段来检查是否有匹配的结果？ 将URL解析为协议，基本部分和其余部分，然后使用（？：[[：]）重新构建基本部分内的 * 验证正则表达式。 ^ /] * \\。）* ，否则用（？：/ [^] *）？。此外，您必须使用 .replace（/ [？（）[\] \\\。+ + $ |] / g，\\ $&）转义所有其他特殊字符。 ）。您还需要锚（ ^ 用于字符串的开始， $ 用于字符串位置的结尾）以匹配整个字符串。不区分大小写的 / i 修饰符只是使模式不区分大小写的好处。

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

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

请参阅

var rxUrlSplit = /（（?: http | ftp）s？）

>）; } else {console.log（s +不匹配！< br />）; }}}

I'm writing a chrome extension which allows the user to modify content on specific websites. I'd like the user to be able to specify these websites using wildcards, for example http://*.google.com or http://google.com/*

I found the following code

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

But there are a few problems with it.

http://test.google.com/ is a match

http://google.com/ is not a match

http://test.google.com is not a match

http://.google.com/ is a match

So how can I can I create a JavaScript code snippet that will check if there is a match correctly?

解决方案

I suggest parsing the URL into protocol, base part and the rest, and then re-build the validation regex replacing * inside the base part with (?:[^/]*\\.)* and otherwise with (?:/[^]*)?. Also, you must escape all other special chars with .replace(/[?()[\]\\.+^$|]/g, "\\$&"). You will also need anchors (^ for start of string and $ for the end of string position) to match the entire string. A case insensitive /i modifier is just a bonus to make the pattern case insensitive.

So, for this exact matchUrl, the regex will look like

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

See the regex demo

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/>");
    }
  }
}

这篇关于Javascript与通配符匹配网址 - Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！