一个正则表达式，用于检查jsfiddle链接的URL结构

Question

如何检查给定字符串是否是以下格式的有效URL地址：

jsfiddle.net/test/wLrk94mp

• 如果用户在URL前面加上https://或http://http://www我想删除它
• 如果用户在URL的末尾添加了一个尾随斜杠，即jsfidd.net/test/wLrk94mp/，我希望将其删除

这是我到目前为止的思路(伪代码(：

1. 检查带有indexOf('jsfiddle.net')的字符串中是否存在jsfiddle.net
2. 删除所有URL前缀
3. 删除任何尾随斜杠
4. 检查字符串是否可以分为3部分(jsfiddle、test、wLrk94mp(
5. 如果满足1-4，则它是一个好的URL，如果不满足，则失败并出现错误

有没有一种方法可以将regex作为一行代码来处理这个问题，或者我应该坚持上面的线性逐步方法？

Answer 1

您可以使用URL API及其属性来获取URL的不同段。

function validateJsfiddleURL(url) {
let addr = new URL(url);
let host = addr.host;
let path = addr.pathname;
// Check in hostname that tsfiddle exist or not
let jsfiddleExist = host.includes("jsfiddle");
if (jsfiddleExist) {

//Check if jsfiddle URL has username(e.g /test/)
let pathsContent = path.split("/").filter(
el => {
return el != ""
}
);
// pathscontent will atleast have two items in it       
if (pathsContent.length >= 2) {
let newURL = `${host}${path}`;
//Remove www. from the newURL if present
newURL = newURL.replace("www.", '');
//Check if the last character of the newURL has forward-slash(/) or not
let newURLlen = newURL.length;
let charOfNewURL = newURL.charAt(newURLlen - 1)
if (charOfNewURL === "/")
newURL = newURL.slice(0, -1)
console.log(`Desired Result 😃: ${newURL}`)
} else {
console.log("user name (eg: test) missing.......😞 ")
}
} else {
console.log("jsfiddle missing.......😞 ")
}
}
validateJsfiddleURL("https://www.jsfiddle.net/test/wLrk94mp/");
validateJsfiddleURL("http://www.jsfiddle.net/test/wLrk94mp/");

validateJsfiddleURL("https://www.jsfiddle.net/wLrk94mp/");
validateJsfiddleURL("http://www.ssfiddle.net/wLrk94mp/");

Answer 2

您可以使用超级花哨的Regex。请注意，并非所有浏览器都支持后备功能(?<=(。

const testCases = ['https://jsfiddle.net/test/wLrk94mp/', 'http://www.jsfiddle.net/test/wLrk94mp', '///jsfiddle.net/test/wLrk94mp/', 'www.jsfiddle.net/test/wLrk94mp/', '//www.jsfiddle.net/test/wLrk94mp', 'https://jsfiddle.net/test/wLrk94mp#hi/there', '/jsfiddle.net/test/wLrk94mp?hi=there#foo=bar', 'https://jsfiddle.net/test/wLrk94mp?hi=there'];
testCases.forEach((testCase) => {
console.log(
testCase.replace(/((/+|https?://)?(www.)?(?=jsfiddle.net/test/.{8})|(?<=jsfiddle.net/test/.{8})/*([?#].*)?)/gi, '')
);
});

---

让我们浏览Regex

这里是：/((/+|https?://)?(www.)?(?=jsfiddle.net/test/.{8})|(?<=jsfiddle.net/test/.{8})/*([?#].*)?)/gi

不过，让我们把它分解一下。

/ ... /gi

首先，我们将制作一个带有标志的Regex"g"；以及"；i"g"；代表gglobal，这意味着它将取代所有比赛，而不仅仅是第一场比赛。"；i〃；flag代表大小写i不敏感，这意味着我们可以通过任何类型的资本化。如果每次都需要小写文本，则这是可选的。

(/+|https?://)?

这将检查/、//、///、http://或https://。括号表示捕获组，问号表示某些字符或组是可选的。这是为了替换URL中的任何协议位。

(www.)?

这只是将URL前面的任何www.都不替换。这也是一个可选组。

(?=jsfiddle.net/test/.{8})

这是一个正向前瞻-它检查所提供的字符串是否实际包含模式"；jsfiddle.net/test/8个字符`，而不将其包含在Regex的搜索结果中。

( ... | ... )

简单或运算符，以匹配第二组：

(?<=jsfiddle.net/test/.{8})

相同的测试模式，但这次是负面展望。这允许我们检查部件BEFORE是否匹配jsfiddle模式，而不将其包含在搜索结果中。

/*

检查是否有0个或多个尾部斜杠。

([?#].+*)?

检查是否有尾随标签或斜线。如果是，还要检查后面是否有0个或多个尾随字符。整个组也是可选的。

---

用法

只需使用str.replace(/((/+|https?://)?(www.)?(?=jsfiddle.net/test/.{8})|(?<=jsfiddle.net/test/.{8})/*([?#].*)?)/gi, '');，其中str是任意字符串。

---

编辑：测试有效的JSFiddle URL

OP回答了另一个关于验证的问题。这可以使用以下JS来完成：

const testCases = ['https://jsfiddle.net/test/wLrk94mp#hello/there', '//tsfiddle.net/test/wLrk94mp//', 'http://www.jsfiddle.net/test/wLrk94mp//', 'not a link'];
testCases.forEach(testCase => {
if (testCase.match(/((///?|https?://)?(www.)?jsfiddle.net/test/.{8}?([?#].*)?)/gi))
return console.log(true, testCase);
console.log(false, testCase);
});

Answer 3

这是另一种方法，这次使用.split和.filter

console.log(
`https://jsfiddle.net/test/wLrk94mp?hello=there#hellothere`.split('/').filter(a => a && !['http:', 'https:'].includes(a)).join('/').split(/[#?]/g)[0]
);